d3.js kombiniert Hierarchical Edge Bundling und Radial Reingold-Tilford Tree + -Daten
Ich möchte (so) die hierarchische Kantenbündelung und die Radial Reingold-Tilford-Baum
Es würde ein bisschen so aussehen (entschuldige meine schrecklichen Fähigkeiten von paint.net) *:
* Die Kinder sollen in einem Bogen sein, wie im Baum.
Ich habe diese Geige eingerichtet, die einfache Daten in HEB anzeigt: Ссылка
Ich habe die beiden Arten von Daten bereits kombiniert (in Kommentaren am Anfang, die die aktuelle Variable "Klassen" ersetzen werden):
%Vor%Wenn es eine bessere Möglichkeit gibt, die Daten zu kombinieren, können Sie sie entsprechend ändern.
Abgesehen davon, dass ich die Daten ändere, bin ich mir nicht sicher, wie ich vorgehen soll, da ich ein d3.js und ein JavaScript-Novize bin, besonders wenn es darum geht, den richtigen Unterpunkt (Punkt 4), aber nicht den anderen (Punkt 5). Ich werde jedoch eine Antwort in Erwägung ziehen, die eine Verbindung zu allen Kindern von Punkt 1 als eine Möglichkeit zeigen wird, dies zu entwickeln.
Bitte aktualisieren Sie diese Geige oder erstellen Sie eine neue, um Ihren Code nach Möglichkeit zu sichern. Jeder Ratschlag zum weiteren Vorgehen ist natürlich willkommen.
Der nächste Schritt besteht darin, diese Kinder beim Klicken ein- oder auszublenden. Dabei verwenden Sie eine ähnliche Methode wie die zusammenklappbare Struktur (Bitte geben Sie auch einen Ratschlag, aber es wird wahrscheinlich später eine neue Frage sein, wenn ich nicht herausfinden kann, wie es geht), da ich mit großen Datenmengen arbeiten muss, um Kinder überhaupt zu rechtfertigen .
Schließlich könnte jedes Kind eigene Kinder haben, aber eine Reihe von Kindern wird für jetzt ausreichen. Ich werde später darauf eingehen.
UPDATE: Die Antworten müssen keine vollständigen Lösungen sein, jedes bisschen (siehe was ich dort gemacht habe?) hilft!
1 Antwort
Ich bin vielleicht völlig auf dem Weg zu dem, was Sie fragen, bitte klären Sie, ob das der Fall ist.
TL; DR : Hier ist, wie es aussieht, basierend auf dem, was ich interpretiert habe von der Frage. Habe einige weitere Daten zum Testen hinzugefügt.
Hierarchische Kantenbündelung bietet eine Möglichkeit, nicht-hierarchische Kanten im Diagramm zu visualisieren. Hier ist der Link zu dem Papier, das in d3 implementiert ist, falls Sie nicht gefunden haben.
Im Beispiel werden nur Blattknoten durch Filtern der anderen Knoten angezeigt:
%Vor%Hierarchische Beziehungen im Beispiel werden durch Punkte in Namen dargestellt, sodass cluster1 das übergeordnete Element von item1, item2 und item3 ist. Hier sieht es so aus, wenn wir den Filter beim Anhängen von Knoten entfernen.
Nun, meine Interpretation Ihrer Frage ist, dass Sie die hierarchische Kantenbündelung verwenden möchten, um die nichthierarchischen Beziehungen (im Beispiel durch Importe dargestellt) und "Radial Reingold-Tilford" für hierarchische Beziehungen zu visualisieren.
So kann das gemacht werden:
Das Datenformat muss nicht ändern, was Sie vorgeschlagen haben. Unten sollte in Ordnung sein:
%Vor%Übernehmen Sie die Funktion packageImports, um hierarchische Kanten von den Knoten zu erhalten:
%Vor%Fügen Sie den Radialdiagonalgenerator aus Radial Reingold-Tilford Beispiel hinzu:
%Vor%Pfad der hierarchischen Kanten anfügen:
%Vor%Ich habe auch die Mouseover- und Mouseout-Funktionen hinzugefügt, um die hierarchischen Knoten hervorzuheben, indem Sie den Mauszeiger über einen übergeordneten Knoten bewegen.
Tags und Links javascript css json d3.js