it-swarm.com.de

Wie erstellt man in d3.js einen Stammbaum?

Ich arbeite gerade an einem kleinen Genealogie-Experiment und möchte einen einfachen Familienstammbaum wie im Bild unten implementieren.

Die bisher besten Suchergebnisse lieferten nur Beispiele, bei denen ein Kind nur einen übergeordneten Knoten haben kann. Was ich aber brauche, ist die Möglichkeit, Verknüpfungen zwischen Entitäten (vom Vater zur Mutter) und Verknüpfungen zwischen Knoten und anderen Verknüpfungen (vom Kind zum Vater-Mutter-Link) herzustellen diese.

Ich habe d3.js für dieses gewählt, weil es so aussieht, als wäre es in der Lage, die Aufgabe zu erledigen. Ich weiß einfach nicht wie oder wo ich anfangen soll. Tutorials zu d3.js behandeln nur Standarddiagramme wie Balkendiagramme.

Ich hoffe jemand kann mir dabei helfen.

This is how the result should look like

49
user659025

Mein Ansatz ist wie unter:

Nehmen wir das Beispiel, das Sie in der beigefügten Abbildung dargestellt haben:

Jenny Of Oldstones ist auch das Kind von Aegon V, aber der Unterschied zwischen diesem Kind und den anderen Kindern von Aegon V ist, dass ich in diesem Fall nicht die Verbindung zwischen ihm und dem Kind herstelle.

Dies geschieht durch Setzen des Knotens als no_parent: true im Knoten JSON Beispiel:

//Here Q will not have a parent
 {
            name: "Q",
            id: 16,
            no_parent: true
 }

Überprüfen Sie im Code die Funktion _elbow, dass die Linie nicht zwischen ihr und ihrem übergeordneten Element gezogen wird:

if (d.target.no_parent) {
    return "M0,0L0,0";
}

Das nächste Szenario ist die Verbindung zwischen dem Knoten Aerys II und Rahella. Dieser Knoten hat seinen Satz von Kindern.

  • Ich habe einen Knoten zwischen ihnen erstellt, der als hidden: true, markiert ist.
  • Ich mache den display:none für einen solchen Knoten. Es scheint, dass die Kinder von der Linie zwischen dem Knoten Aerys II und Rahellakommen. _

JSON-Beispiel: 

//this node will not be displayed
{ name: "",
    id: 2,
    no_parent: true,
    hidden: true,
    children: [....]

    }

Überprüfen Sie im Code die Stelle, an der ich die Rechtecke mache. Der folgende Code verbirgt den Knoten:

    .attr("display", function (d) {
    if (d.hidden) {
        return "none"
    } else {
        return ""
    };
})

Den vollständigen Code finden Sie hier: http://jsfiddle.net/cyril123/0vbtvoon/22/

Im obigen Beispiel habe ich die Knotennamen A/B/C verwendet ..., aber Sie können diese nach Ihren Anforderungen ändern. Sie müssen den Text zentrieren.

Ich habe dem Code Kommentare hinzugefügt, um Ihnen zu helfen, den Ablauf zu verstehen. Nur für den Fall, dass Sie sich zu irgendeinem Punkt nicht klar sind, bitte kommentieren Sie, ich werde Ihnen gerne eine Klarstellung geben.

38
Cyril

dTree ist eine auf D3 aufgebaute Open Source-Bibliothek, die Familienstammbäume (oder ähnliche hierarchische Graphen) erstellt. 

Es behandelt die lästigen Teile der manuellen Erstellung des D3-Diagramms und verwendet ein einfaches Json-Datenformat: 

[{
  name: "Father",
  marriages: [{
    spouse: {
      name: "Mother",
    },
    children: [{
      name: "Child",
    }]
  }]
}]

Wenn Sie daran interessiert sind, es zu ändern, unterstützt es den Callback für das Knoten-Rendering und den Event-Handler. Schließlich ist die Bibliothek ab 2016 in der Entwicklung und Pull-Anfragen sind willkommen.

HAFTUNGSAUSSCHLUSS: Ich bin der Autor von dTree. Ich habe die Bibliothek erstellt, nachdem ich genau wie Sie im Web gesucht hatte und nichts gefunden habe, was mir gefällt.

9
Erik

Ich weiß, dass diese Frage ziemlich alt ist, aber wenn noch jemand interessiert ist, werfen Sie einen Blick auf my sample hier .

9
Rickard

Die nicht so gute Nachricht: Die von mir durchgeführten Untersuchungen zeigen, dass es keine Standard-D3-Bibliothek gibt, die dies ohne Anpassungen direkt bewerkstelligt.

Die gut news: Es gab einige andere Leute, die sich dies angesehen haben und einige gute Startpunkte gefunden haben! Ich stelle fest, dass dies keine vollständige Lösung für die gesamte anstehende Aufgabe ist, aber aus Ihrer Frage scheint es, dass ein großer Teil Ihrer Schwierigkeit bisher nur herausgefunden hat, wo Sie anfangen sollen (z. B. "Tutorials über d3.js nur Standard Diagramme wie Balkendiagramme. "). Wenn es nichts Besseres gibt, werde ich hier zumindest auf diesen Teil eingehen.

Zunächst bietet inanutshellus in der Antwort auf diesen verwandten Stackoverflow-Beitrag vor ein paar Jahren einige großartige D3-Tools, die sind verfügbar sind und hier nützlich sein könnten. Mit einigen leichten Anpassungen/Erweiterungen sollten sie in der Lage sein, Sie relativ schnell dahin zu bringen, wo Sie hin wollen. Für die Nachwelt wird die Antwort von inanutshellus hier wiedergegeben:

Es gibt einige Optionen, aber ich glaube, jeder würde ein bisschen .__ benötigen. Arbeit. Es wäre hilfreich, wenn es einen einzigen Standard für die Darstellung von .__ gibt. ein Stammbaum in JSON. Ich habe kürzlich festgestellt, dass geni.com eine ziemlich .__ hat. ausführliche API für diese. Vielleicht wäre das Kodieren gegen ihre API eine gute Idee für die Wiederverwendbarkeit ...

- Stammbaum -

Der Stammbaum könnte für Ihre Bedürfnisse ausreichend sein. Sie würden die In-law-Verknüpfung herstellen, Wenn Sie auf ihren Namen klicken, wird der Graph neu gezeichnet, damit Sie siehst ihre Abstammung.

- Bracket Layout Tree -

Ähnlich wie beim Pedigree Tree, aber bidirektional, ist dieser Bracket Layout Tree Lässt Sie eine "Hier sind meine Eltern, Großeltern, Kinder, Enkelkinder" - Typansicht. Wie beim Pedigree Tree würden Sie Einzelpersonen können verknüpft werden, um die Klammer auf diesem Knoten neu zu zentrieren.

- Kraftbasiertes Layout -

Es gibt einige interessante kraftbasierte Layouts, die vielversprechend erscheinen . Werfen Sie einen Blick auf dieses Beispiel eines kraftbasiertes Layout mit intelligenten Etiketten . Eine Anpassung an die Ein Algorithmus, wie die "Kraft" bestimmt wird, könnte daraus eine .__ machen. sehr schöner Baum mit älteren Generationen über oder unter neueren.

- Cluster-Dendogramm (warum es fehlschlägt) -

Die d3.js-Layouts, die ich gesehen habe, eignen sich am besten für die Familie Bäume gehen davon aus, dass ein einzelner Knoten der übergeordnete Knoten ist, während Sie repräsentieren das übergeordnete Element als Kombination von (visuell ein "T" zwischen) Zwei Knoten: Ein Knoten, der Mitglied Ihres Baums ist, und ein Floating Knoten, der das In-Law darstellt. Anpassen eines Cluster-Dendogramms für die Ausführung von dies sollte möglich sein, jedoch nicht ohne wesentliche Modifikation.

Wenn Sie - oder irgendjemand sonst - dies angehen, lassen Sie es mich wissen. Ich würde Ich möchte die Arbeit gerne sehen (und davon profitieren) und kann möglicherweise dazu beitragen, dass wenn es machbar ist.

In Bezug auf die konkrete Umsetzung stellte mj8591 diese Frage einen ähnlichen Stammbaum mit einem anderen Problem. Glücklicherweise enthält diese Frage jedoch eine Geige (den gesamten js-Code), die die meisten oder alle Komponenten enthält, die Sie benötigen, und die Antwort von mdml enthält eine weitere Geige, die jedem Knoten mehr granulare "Klickbarkeit" hinzufügt .

Wieder ist es nichts Automagisches, aber hoffentlich reichen diese Ressourcen aus, um Ihnen einen guten Start zu ermöglichen!

5
matt

Ich habe dtree ausprobiert und es hat mir gefallen. Wenn Sie jedoch mehrere Generationen hinzufügen, kann die Gesamtanzeige durch die horizontale Anzeige sehr groß und unhandlich werden. Stattdessen habe ich den Reingold-Tilford-Baum verwendet. Ein Nachteil dieses Baums ist, dass jeder Knoten nur einen übergeordneten Knoten haben kann: Ehepartner können nicht nebeneinander angezeigt werden: Um diese Einschränkung zu umgehen, habe ich den JSON angepasst, um Ehepartner vor dem Senden zu einer Entität (z. B. "Ehemann - Ehefrau") zusammenzufassen es an den Baum.

3
Vivek Kodira

Beantwortung 3 Jahre nach der Frage.

Es gibt jetzt ein Stammbaumdiagramm von Mike

enter image description here

https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295

Dann gibt es diesen d3.tree - einen Stammbaum https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295

Sie können den D3 Tidy Tree auch von Mike aus erneut testen https://beta.observablehq.com/@mbostock/d3-tidy-tree

0
kiranvj

Ich weiß nicht, ob dies für Sie hilfreich ist, da Sie gesagt haben, dass Sie d3.js verwenden würden, aber es gibt ein anderes Tool, das Sie mit jsplumb untersuchen möchten. Es scheint perfekt für diese Art von Projekt: Homepage . Sie haben auch einige anständige Tutorials. Es gibt eines wie docs und ein anderes interaktiveres .

Wie gesagt, wenn es nicht zu spät ist, die Technologie zu wechseln, lohnt es sich vielleicht, dies zu versuchen. Es ist alles HTML, CSS und Javascript, also sollte es kein harter Übergang sein.

0
TheHuman Wall