Я хочу создать динамическую реальную жизнь, например генеалогическое древо, в формате HTML/SVG в javascript. ⇐ Javascript

[Anonymous]

У меня есть немного странная задача в проекте, который я делаю: проект посвящен семье, и в одном разделе показано генеалогическое древо. это генеалогическое древо ранее было нарисовано вручную, и в нем недостаточно членов семьи. владельцу проекта нужна динамика на каком-то уровне. Поэтому он добавляет/удаляет детей и родителей по своему желанию.
это генеалогическое древо



Я уже создал json, который включает в себя всех детей с их отношением друг к другу, пример:

Код: Выделить всё

{
"uid": "1",
"name": "مسفر",
"type": "grand-white",
"born": "",
"died": "",
"children": [
{
"uid": "2",
"sorting": "1",
"name": "بركات",
"type": "white",
"born": "",
"died": "",
"children": [
{
"uid": "3",
"name": "child_1",
"type": "green",
"born": "",
"died": "",
"children": []
}
]
},
]
}

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


Итак, вся идея в том, чтобы сделать дерево сейчас с:

• то же самое форму как оригинал
• алгоритм для рисования ветвей, учитывая отношения родитель-потомок и расположение/расстояние между листьями и ветвями
• все дерево имеет овальную визуальную границу, до которой все это должно растягиваться/сжиматься
• форма должна быть такой же, как у дерева, поэтому размещение может быть различаются в зависимости от json. Но то, как кривые ветвей дерева должны выглядеть как на изображении og, по крайней мере, на 80 % процентов.

Так что любой более простой способ, идея или ярлык будут оценены по достоинству. Мне нужен совет «Если бы я был на вашем месте... вот что я сделал бы шаг за шагом».
Спасибо

Подробнее здесь: https://stackoverflow.com/questions/798 ... javascript