Ich möchte einen dynamischen, realitätsnahen Stammbaum als HTML/SVG in Javascript erstellen ⇐ JavaScript

[Anonymous]

Ich stecke in einem Projekt, das ich mache, vor einer etwas seltsamen Aufgabe. Das Projekt handelt von einer Familie und ein Abschnitt zeigt den Stammbaum. Dieser Stammbaum wurde zuvor von Hand gezeichnet und es fehlen zu viele Familienmitglieder. Der Projekteigentümer benötigt eine gewisse Dynamik. Also fügt er nach Belieben Kinder und Eltern hinzu bzw. entfernt sie.
Das ist der Stammbaum



Ich habe bereits ein JSON erstellt, das die gesamten Kinder mit ihrer Beziehung zueinander enthält, Beispiel:

Code: Select all

{
"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": []
}
]
},
]
}

und habe ein JS-Skript erstellt, um daraus ein Grundgerüst zu erstellen. Wenn es ein logisches Grundgerüst gibt, kann ich die Formen bearbeiten. passend zum Originalbild. Das habe ich bekommen (ich habe aufgehört, nur weil es zu lange dauert, um so weiterzumachen, ich denke, es gibt einen besseren Weg)


Die ganze Idee ist also, den Baum jetzt zu erstellen mit:

• der gleichen Form wie Das Original
• ein Algorithmus zum Zeichnen der Zweige. Unter Berücksichtigung der Eltern-Kind-Beziehung und der Platzierung/Abstand der Blätter und Zweige
• Der gesamte Baum hat einen ovalen visuellen Rand, auf den das Ganze gedehnt/komprimiert werden sollte
• Die Form sollte der Idee des Baums entsprechen, daher kann die Platzierung je nach Baum unterschiedlich sein json. Aber die Art und Weise, wie sich die Äste der Bäume krümmen, sollte mindestens zu 80 % dem Originalbild ähneln.

Jeder einfachere Weg, eine Idee, eine Abkürzung wäre also willkommen. Ich suche nach dem Rat „Wenn ich du wäre ... das würde ich Schritt für Schritt tun“
Danke