d3: Erstellen Sie einen statischen gerichteten Graphen
Ich möchte einen 20K Knoten Abhängigkeitsgraphen in d3 visualisieren. Kraftgesteuerte Graphen wie Ссылка sind zu langsam, um diese Anzahl von Knoten im Browser darzustellen.
Grundsätzlich möchte ich Knoten darstellen, die Text und gerichtete Kanten von einem Knoten zum anderen enthalten, und Zoom- und Schwenkfunktionen hinzufügen. Wie kann ich das in d3 machen?
3 Antworten
Das Zoomverhalten (und Pan) erhalten Sie grundsätzlich kostenlos über das Zoomverhalten . Das Layout müsste man allerdings selbst machen - das Force-Layout ist so ziemlich das Einzige in D3, mit dem man ein solches Diagramm auslegen kann.
Unabhängig davon, was Sie verwenden, ist bei 20K-Nodes alles Dynamische ziemlich langsam - das Rendern aller Elemente dauert einige Zeit, in denen der Browser nicht mehr reagiert. Eine Alternative, die Sie in Erwägung ziehen sollten, besteht darin, das Diagramm mit etwas besser geeignetem für große Datenmengen zu rendern, das Ergebnis als Bild (oder sogar statisches SVG) zu speichern und ein wenig D3-Code oben zum Zoomen / Schwenken hinzuzufügen .
Hier ist eine Alternative, die die Knoten nicht mit Gewalt auszustatten scheint - es gibt keine Federung, gute Leistung und eine eingebaute Upload / Download-Funktion. Seine Lizenz ist MIT / X:
Interaktives Tool zum Erstellen von gerichteten Grafiken mit d3.js
directed-graph-creator
Operation:
- Ziehen / scrollen, um das Diagramm zu übersetzen / zoomen
- Shift-Klick auf Grafik zum Erstellen eines Knotens
- Klicken Sie bei gedrückter Umschalttaste auf einen Knoten und ziehen Sie ihn dann auf einen anderen Knoten, um ihn mit einer gerichteten Kante zu verbinden
- Shift-Klick auf einen Knoten, um seinen Titel zu ändern
- Klicken Sie auf Knoten oder Kante und drücken Sie die Rücktaste / Löschen, um
zu löschen
Sie können einen statischen gerichteten Graphen ohne die Animation mit force.start, force.tick, force.stop erzeugen. Hier ist ein Beispiel:
Beim Laden von 20K-Knoten kann es sich nur um ein statisches Diagramm handeln. Sie können das Diagramm speichern und dann ohne d3-Berechnung laden.
Tags und Links javascript graph d3.js