D3.js Verknüpfungen zwischen Elementen in einem Radialbaum hinzufügen (Hierarchische Kantenbündelungselemente)
Vor ein paar Monaten habe ich versucht
Ich bin vom HEB gestartet und habe versucht, es zu einem Baum zu machen. Die Dinge haben nicht so funktioniert, wie ich es wollte, und mir wurde klar, dass es besser wäre, von einem kollabierbaren Radialbaum (nicht Reingold Tilford) aus mit einem anderen Winkel anzufangen.
Hier ist ein JSFiddle des Radialbaums
Das Datenmodell hat sich ebenfalls geändert, da Elemente jetzt einen Namen, Kinder und Importe (Links) haben.
%Vor% Um langsam zu beginnen, möchte ich die nicht-interaktive hierarchische Kantenbündelung von Mike Bostock mit dem aktuellen
Außerdem muss nur die erste Ebene Links (Eltern-Eltern-Verbindung) haben, wie unten gezeigt (das Ergebnis, das ich will):
Mein derzeitig größtes Problem ist, dass der HEB keinen "root" hat, aber der Baum beginnt mit einem einzelnen Gegenstand. Alles, was ich bisher versucht habe, hat zu einer großen Unordnung in der Mitte des Baumes geführt.
Beachten Sie, dass es in der Mitte des Baums einen Kreis gibt, der die Links zu Ebene 1 bis Ebene 1 abdeckt, sodass der Baum auf Ebene 1 (Eltern) beginnt.
%Vor%Idealerweise müssen die Links zwischen den Eltern aktualisiert werden, wenn eine Ebene (un) kollabiert ist, wie es für die Knoten und die Verbindungen zwischen den Ebenen der Fall ist, aber das kann später kommen und ist vielleicht nicht so schwierig, nachdem die erste Ebene erreicht wurde Links zu zeigen. Außerdem kann sich die Datenvorlage bei Bedarf ändern, aber alle drei Informationen sind wichtig (Name, Kinder und Importe).
Eine andere Möglichkeit wäre, die Daten so zu ändern, dass sie den Root-Teil nicht enthalten und sich genau so verhalten wie jetzt Teilweise Antworten sind ebenfalls willkommen.
2 Antworten
Ich habe es geschafft, Links zwischen Elementen in diesem JSFiddle unter Verwendung von Teilen des Codes, die in der ursprünglichen hierarchischen Kantenbündelung von Mike Bostock gefunden wurden, hinzuzufügen und sie zu der radialen Version der zusammenklappbaren Struktur hinzugefügt. Sie werden jedoch beim Zusammenklappen oder Erweitern von untergeordneten Elementen nicht aktualisiert!
%Vor% dann in update(source) :
Die Funktion "packageImport" befindet sich unten.
%Vor%Mein derzeitig größtes Problem ist, dass der HEB keinen "root" hat, aber der Baum beginnt mit einem einzelnen Gegenstand. Alles, was ich bisher versucht habe, hat zu einer großen Unordnung in der Mitte des Baumes geführt.
Wenn Sie eine Wurzel haben, legen Sie diese als Mittelpunkt "Knoten" fest und machen Sie daraus einen Radialbaum, wie dies ? Hier ist ein anderes Beispiel, aber mit mehreren Wurzeln.
Das heißt, Sie haben nicht nach einem Radialbaum gefragt, selbst wenn es so klingt, würde das Ihre Frage beantworten. Wenn Sie entschlossen sind, die Dinge in Kreisen mit variierendem Radium zu arrangieren, ist vielleicht das Problem, das gelöst werden muss, das der kreuzenden Linien, die so "chaotisch" aussehen. Wenn dies der Fall ist, könnte ein anderer Sortieralgorithmus den Zweck erfüllen. Hier ist ein Artikel, der sich mit der Verwendung verschiedener Sortieralgorithmen beschäftigt in einem ähnlichen Szenario mit D3.js. D3 Layoutalgorithmen sind auch Open Source online .
Die beste Ressource, die ich für dich finden konnte, war diese Stapel-Mathematik-Antwort . Besonders hervorzuheben sind dabei einige Punkte:
- Sie können eine ganze Menge Verbindungen / Verzweigungen haben, aber wenn es interaktiv ist und die Zweige zu und von einem bestimmten Knoten aufleuchten, wenn Sie den Mauszeiger über diesen Knoten halten, kann es immer noch ein lesbarer / benutzbarer Graph sein.
- Sie können verschiedene Sortieralgorithmen ausprobieren, bis Sie eine finden, die gut mit Ihren Daten zusammenarbeitet.
- Sie können einen oder mehrere Knoten innerhalb des Kreises haben, und in diesem Fall könnte es sehr sinnvoll sein, den Wurzelknoten in der Mitte zu platzieren.
Es ist keine praktisch anwendbare Antwort, da es in Mathematica ist, aber ich denke, dass seine Erklärung der zugrundeliegenden Theorien und Techniken nützlich ist.
Ein vielleicht künstlerischer Ansatz, wenn Sie die Wurzel des Baumes nicht in den Mittelpunkt stellen möchten, wäre, alle Zweige von den Eltern zum Stammelternteil halbtransparent zu machen und möglicherweise eine andere Farbe zu haben. p>
Hoffe, das hilft!
Tags und Links javascript css json tree d3.js