Wie zeige ich Ehen in einem d3.js-basierten "Stammbaum" an?

Question

Ich bin ein HTML/CSS-Entwickler, recherchieren Javascript-Lösungen für den Aufbau eines "Stammbaums", der Ehen (von außerhalb der Familie, natürlich) in einer sinnvollen Weise zeigen muss.

Im Grunde bin ich auf der Grundlage eines Dendrogramms basierend auf d3.js, z.B. http://bl.ocks.org/4063570, aber ich habe Mühe, dort draußen etwas zu finden, das "Ehen" ausdrückt.

Unten ist ein Bild der Daten ich es auf stützen wird: würde sehr geschätzt

Jede Hilfe/Anregungen/Links! Ich weiß einfach nicht, ob es überhaupt möglich ist, aber ich würde gerne d3.js benutzen, da es so gut aussieht und anscheinend vielseitig ist.

Answer 1

Es gibt einige Optionen, aber ich glaube jeder würde ein bisschen Arbeit erfordern. Es würde helfen, wenn es einen einzigen Standard für die Darstellung eines Familienstammbaums in JSON gäbe. Ich habe kürzlich festgestellt, dass geni.com dafür eine recht eingehende API hat. Vielleicht wäre Codierung gegen ihre API eine gute Idee für Wiederverwertbarkeit sein ...

- Stammbaum -

The Pedigree Tree könnte für Ihre Bedürfnisse ausreichen. Sie würden In-law Linkbar machen, wo, wenn Sie auf ihren Namen geklickt hätten, würde der Graph neu gezeichnet werden, so dass Sie ihre Abstammung sehen könnten.

- Bracket-Layout-Baum -

Ähnlich dem Stammbaum, sondern bidirektional, diese Bracket Layout Tree können Sie behandeln ein „sind hier meine Eltern, Großeltern, Kinder, Enkel“ Typ Ansicht. Wie beim Stammbaum würden Sie Einzelpersonen dazu bringen, die Klammer auf diesem Knoten neu zu zentrieren.

- Kraft-basierte Layout -

Es gibt einige interessante kraftbasierte Layouts, die vielversprechend scheinen. Werfen Sie einen Blick auf this example of a force-based layout with smart labels. Eine Anpassung an den Algorithmus, wie die "Kraft" bestimmt wird, könnte dies zu einem sehr schönen Baum machen, mit älteren Generationen über oder unter neueren.

- Cluster Dendogramm (warum es fehlschlägt) -

Die d3.js Layouts die ich gesehen habe, dass sich am besten an Stammbäume übernehmen ein einzelner Knoten die Eltern ist verleihen würde, während Sie das darstellen müssen Parent als die Kombination von (visuell ein "T" zwischen) zwei Knoten: ein Knoten, der ein Mitglied Ihres Baums ist, und ein floatender Knoten, der den In-Law darstellt. Die Anpassung eines Cluster-Dendogramms sollte möglich sein, aber nicht ohne signifikante Modifikation.

Wenn Sie - oder jemand anderes in dieser Angelegenheit - damit umgehen, lassen Sie es mich wissen. Ich würde gerne die Arbeit sehen (und davon profitieren) und könnte vielleicht dazu beitragen, wenn es machbar ist.

Answer 2

Ich musste auch Stammbäume mit D3 zeichnen, also habe ich herausgefunden, wie. Ich habe created examples, die die grundlegenden Funktionen zeigen und dann erweiterte Funktionen wie das Erweitern und Anzeigen von Nachkommen hinzufügen.

Ich weiß nicht, wie Sie Ehen anzeigen möchten. Ehen sind in einem Stammbaum der Vorfahren enthalten, aber nicht in einer Abstammungskarte. Der Code könnte angepasst werden, um Ehepartner in den Nachkommenknoten anzuzeigen.

Hier ist ein Bild davon, wie es aussieht. Der Stil kann wie gewünscht optimiert werden.

Answer 3

Dies braucht etwas Arbeit, aber im Wesentlichen der Idee, die ich vorschlagen, ist mit einer besonderen Art von Knoten genannt Beziehung eine Kraft Layout zu tun, die nicht über einen Kreis zeichnen. Es stellt die Bindung zwischen zwei Subjekten dar und kann das Elternelement mehrerer Knoten sein.

In d3 können Sie alle Datenstrukturen erweitern, um zu passen, was Sie wollen, dann gibt es mehr Arbeit, um die Daten zu binden, aber es ist alles anpassbar. Hier ist ein Beispiel für die Datenstrukturen, die ich im Force-Layout verwenden würde.

{ 
    "nodes": [ 
    { 
     "type": "root", 
     "x": 300, 
     "y": 300, 
     "fixed": true 
    }, 
    { 
     "type": "male", 
     "name": "grandpa" 
    }, 
    { 
     "type": "female", 
     "name": "grandma" 
    }, 
    { 
     "type": "relationship" 
    }, 
    { 
     "type": "male", 
     "name": "dad" 
    }, 
    { 
     "type": "female", 
     "name": "mum" 
    }, 
    { 
     "type": "relationship" 
    }, 
    { 
     "type": "male", 
     "name": "I" 
    } 
    ], 
    "links": [ 
    { 
     "source": 0, 
     "target": 2 
    }, 
    { 
     "source": 1, 
     "target": 2 
    }, 
    { 
     "source": 0, 
     "target": 3 
    }, 
    { 
     "source": 3, 
     "target": 4 
    }, 
    { 
     "source": 4, 
     "target": 6 
    }, 
    { 
     "source": 5, 
     "target": 6 
    }, 
    { 
     "source": 6, 
     "target": 7 
    } 
    ] 
} 

Ich hoffe, ich habe etwas über die Möglichkeiten von d3 geklärt.