Создание семейного дерева(С родителями матери и отца) и множеством детей, как?

Question

[xpytep]

Люди добрые, подскажите, реально ли вообще то, что мне хочется сделать?
Я делаю семейное дерево, но я уже неизвестно сколько ищу, уже надежду теряю. Как написать - даже не представляю.... ((( Приложенно фото, то что синим, у меня получается ( вот ссыль thecodeplayer.com/walkthrough/css3-family-tree?s=rl ), то что красным - хочется чтоб было, но никак (( я уже и JS искал, и что только не пробовал, везде просто вид дерева, ветки можно делать только в одну сторону, а с другой стороны нельзя их соединить (

Суть такова, что сколько бы я в гугле не рылся(уже около двух недель ищу), везде сделанно так, что 1 ребенок, и 2 родителя, 1 ребенок, два родителя, а мне надо что бы добавлять всех детей. Что-бы видно было кто кому дядя, кто кому сестра, и т.д. :( Я понимаю что UL LI - это не вариант для тех нужд что мне нужно, но не понимаю как это рисовать? Думал как-то дивы соединять линиями, чтоб писать типо div id, pid, level, но не нашел ничего по этому поводу (

Comments

[nirvimel]

A Database Error Occurred

Кажется у вас что-то упало (на сайте).

[xpytep]

nirvimel: thecodeplayer.com/walkthrough/css3-family-tree?s=rl сорри ссылка урезалась при копировании :)

Answer 1

[Алексей]

Ну, начнём с разрыва шаблона - это не дерево.
У нас двое родителей у каждой ноды, любое количество детей, а ещё могут быть инцесты...

Не дерево, но граф.
Вот вам песочница с готовым примером(по-другому ссылка не вставилась):

http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html?graph=%2F*%20Example%20*%2F%0Adigraph%20%7B%0A%20%20%20%20%2F*%20Note%3A%20HTML%20labels%20do%20not%20work%20in%20IE%2C%20which%20lacks%20support%20for%20<foreignObject>%20tags.%20*%2F%0A%20%20%20%20node%20%5Brx%3D5%20ry%3D5%20labelStyle%3D"font%3A%20300%2014px%20%27Helvetica%20Neue%27%2C%20Helvetica"%5D%0A%20%20%20%20edge%20%5BlabelStyle%3D"font%3A%20300%2014px%20%27Helvetica%20Neue%27%2C%20Helvetica"%5D%0A%20%20%20%20yourvirtualnode%20%5Bshape%3Dcircle%2Cwidth%3D.01%2Cheight%3D.01%2Clabel%3D""%5D%0A%20%20%20%20%0A%09"Отец%20жены"%20->%20"Жена"%3B%0A%09"Мать%20жены"%20->%20"Жена"%3B%0A%09"Отец%20мужа"%20->%20"Муж"%3B%0A%09"Мать%20мужа"%20->%20"Муж"%3B%0A%09%0A%20%20%20%20"Муж"%20->%20yourvirtualnode%20%5Barrowhead%3Dnone%5D%0A%20%20%20%20"Жена"%20->%20yourvirtualnode%20%5Barrowhead%3Dnone%5D%0A%20%20%20%20%0A%20%20%20%20yourvirtualnode%20->%20"Ребёнок%201"%0A%20%20%20%20yourvirtualnode%20->%20"Ребёнок%202"%0A%20%20%20%20yourvirtualnode%20->%20"Ребёнок%203"%0A%7D%0A%20%20

Описание синтаксиса смотреть тут: www.graphviz.org/content/dot-language
Сама либа на D3: https://github.com/cpettitt/dagre-d3
И ещё одна реализация: https://github.com/mdaines/viz.js

Comments

[xpytep]

Отличное решение, именно то, что мне необходимо было! Спасибо огромное :) только что-то не могу разобратся как его скачать, чтобы у себя его построить...Скачал зип архив, а в нем ниодно демо не работает почемуто

[Алексей]

Чтобы это запустить - нужно подключить три библиотеки:
d3 - для визуализации данных,
graphlib-dot - как я понимаю это рендерер для того чтобы данные рисовались в виде похожем на дерево,
dagre-d3

Результат в codepen: codepen.io/Aleksey_Andreev/pen/dYqMZZ

[xpytep]

Алексей: Да Алексей, вы мне отвечали пол часа назад об этом в другой теме, где я спрашивал как это вырезать. Я так и не смог разобратся. Установить на сервер у меня нету возможности, и исходя из кодов которые вы сейчас сюда выложили, видно что это работает судя по всему без установки. Я так и не могу понять, как мне сделать что-бы считывалось это не из поля ввода, а из JS файла. Вот сижу гуглю...

[Алексей]

Скопируйте по очереди ссылки из script src прямо в адресную строку браузера - и копируйте появившийся код. Сюда напрямую ссылки кинуть не могу - toster их ломает.

[xpytep]

Это да, но как сделать что-бы он читал не из поля ввода, а из моего JS? Я в JS - ноль.

[Алексей]

Чуть подправил код - теперь конфиг берётся из переменной graphConfig: codepen.io/Aleksey_Andreev/pen/dYqMZZ?editors=101

[Алексей]

Нормальная работа с конфигом через JS: cpettitt.github.io/project/dagre-d3/latest/demo/se...