Hierarchisches Kraftdiagramm mit D3.js

Question

Ich möchte mit Hilfe von D3.js ein hierarchisches Kraftdiagramm erstellen - ein kraftgerichtetes Diagramm, mit dem Sie in einer baumartigen Struktur navigieren können, indem Sie auf Knoten klicken, die das Diagramm auf die Kinderebene erweitern (wo die Beziehungen zwischen den Kindern gezeigt werden). Die Knoten können auf zwei Arten, Eltern oder Geschwister, miteinander verwandt sein. Die übergeordnete Beziehung gibt an, dass Knoten "ihrem übergeordneten Element angehören".

Als Ausgangspunkt habe ich das Force-Cluster-Beispiel betrachtet: https://github.com/mbostock/d3/blob/master/examples/force/force-cluster.html, und enthalten die oben genannten Beziehungen, aber ich kann nicht herausfinden, wie nur das erweiterte Cluster und nicht das gesamte Netzwerk (siehe Bild unten).

JSON data: 
{"nodes": 
     [ 
     {"name":"Person 0","group":"Person 0"}, 
     {"name":"Person 1","group":"Person 1"}, 
     {"name":"Person 2","group":"Person 1"}, 
     {"name":"Person 3","group":"Person 1"},  
     {"name":"Person 4","group":"Person 3"}, 
     {"name":"Person 5","group":"Person 3"} 
     ], 
"links": 
     [ 
     {"source":1,"target":0,"type":"sibling"}, 
     {"source":2,"target":1,"type":"parent"}, 
     {"source":3,"target":1,"type":"parent"}, 
     {"source":3,"target":2,"type":"sibling"}, 
     {"source":4,"target":3,"type":"parent"}, 
     {"source":5,"target":3,"type":"parent"}, 
     {"source":4,"target":5,"type":"sibling"} 
     ] 
} 

Oben: Kraftdiagramm, wo die roten Links, um die Geschwisterbeziehung angeben.

Es wäre auch die „Kinder“, wie Kinder in der JSON, anstelle der Verwendung der Eltern „Typ“ sein, möglich zu gestalten:

{ 
"nodes": [ 
    { 
     "name": "Person 0", 
    }, 
    { 
     "name": "Person 1", 
     "children": [ 
      { 
       "name": "Person 2", 
      }, 
      { 
. 
. 
. 
"links": [ 
    { 
     "source": 1, 
     "target": 0 
    }, 
. 
. 

Wie aber dann Sie die Baumstruktur verbinden, während halten Spur der Beziehungen zwischen den Kindern Knoten?

Eine einfallsreiche baumartige Struktur würde wie folgt aussehen:

Der untere Abschnitt ein gewünschtes Layout der visuellen (ähnlichen Funktion zu dem in dem oberen Bild) zeigt.

Haben Sie Vorschläge, wie Sie vorgehen sollen?

Answer 1

Implizit sind alle Knoten mit demselben direkten Elternteil Geschwister. Daher sollten Sie nicht zusätzlich nachverfolgen müssen, ob die Knoten untereinander Geschwister sind oder nicht.

Wenn Sie Knoten haben, die nur zu anderen Geschwisterknoten gehören, aber keine Eltern haben (wie die Beziehung zwischen Person 0 und Person 1 in Ihrem Beispiel), ist das Baumlayout nicht die richtige Wahl. Stattdessen sollten Sie das Force-Layout ausprobieren.