Ich versuche, gerichtete azyklische Grafik mit d3.js zu zeichnen. Bei der Suche nach dem Layout bin ich auf Dagre gestoßen, aber es scheint weniger nützlich zu sein, da ich DOT-basierten Code nirgendwo verwenden möchte. Wenn jemand über reine Javascript-Lösung für dieses oder Plugin/benutzerdefinierte Layout für DAG weiß, lassen Sie es mich bitte wissen. Danke im Voraus.Directed azyklische Grafik mit d3.js ohne DOT
Dagre Autor hier. Dagre enthält keinen graphviz code - es ist pures JavaScript. Es basiert jedoch auf ähnlichen Layouttechniken; beide basieren auf Techniken aus dem Sugiyama-Papier.
Sie können einige Beispiele für dagre finden Sie hier:
http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html http://cpettitt.github.io/project/dagre-d3/latest/demo/sentence-tokenization.html http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html
Die minimierte Quelle kann hier gefunden werden: http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js. Es ist ungefähr 44K groß.
Das Rendern gerichteter azyklischer Graphen (und das Hervorheben der Directivity-Eigenschaft) ist eine Domäne der Layout-Algorithmen Sugiyama.
Sie weisen den Knoten im Grunde Layer zu (durch topologische Sortierung) und berechnen dann eine Sequenz für die Knoten in den Layern. Mit einer einfachen Heuristik, um die Zyklen zuerst umzukehren, funktioniert dies auch gut für zyklische Graphen. Graphviz DOT hat eine Implementierung dieses Layouts mit der Bezeichnung dot, was auch der Name des Dateiformats ist, das es verwendet, so dass es manchmal etwas Verwirrung gibt, wenn DOT erwähnt wird.
Natürlich gibt es andere Implementierungen des Algorithmus, auch eine Cross-kompilierte Javascript-Version von dot ist available. Die wohl umfassendste Lösung, die für Javascript verfügbar ist, ist die kommerzielle Implementierung des Algorithmus in der yFiles Bibliothek. Wenn dies in einem kommerziellen Szenario ist, können Sie sich die entsprechende live demo ansehen. Beachten Sie, dass yFiles zwar mit einer eigenen Rendering- und Editorimplementierung ausgestattet ist, Sie den Code jedoch in d3.js stecken können, da die Layoutalgorithmen als Standalone-Implementierungen verwendet werden können, um "nur" die Koordinaten der Knoten, der Kantenverbindungspunkte, zu berechnen. die Biegungen und die Etiketten. Diese spezifische Implementierung unterstützt eine große Anzahl von zusätzlichen Einschränkungen, wie "Port Constraints" (um die Richtung der ausgehenden und eingehenden Kanten sowie ihre genauen Positionen an den Knoten einzuschränken), hierarchisch gruppierte Knoten (wobei jeder Knoten einen Elternknoten haben kann) und der Elternknoten "enthält" alle seine Kindknoten), Schicht- und Sequenzbeschränkungen, Kantenbeschriftungseinschränkungen, verschiedene Kantenführungsstile, Bus-Routing und mehr.
Offenlegung: Ich arbeite für die Firma, die besagte Bibliothek erstellt, aber auf SO vertrete ich nicht meinen Arbeitgeber.
Danke. Grundsätzlich scheue ich mich davor, graphViz zu verwenden, da es für jedes Betriebssystem kompiliert werden muss, aber ich schaue mir yFiles an. –
@AmitGupta: Die Javascript-kompilierte Version von GraphViz muss natürlich nicht "neu kompiliert" werden. Es fühlt sich jedoch immer noch wie ein riesiger binärer Blob im Browser an - es hat keine echte API, aber es ist mehr wie eine Konsolenanwendung, sogar im Browser. – Sebastian
Ja. Ich stimme zu. Scheint so, als ob ein benutzerdefiniertes Layout benötigt wird. –
Danke Chris. Ich habe Dagre jetzt im Detail studiert, aber immer noch nicht über einige Aspekte klar: 1. Kann es Zyklen in Graphen behandeln, keine große Einschränkung? 2. Kann ich anstelle von einfachen Formen Symbole im Diagrammlayout verwenden? –
1) Es kann Grafiken mit Zyklen verarbeiten. 2) Es gibt keine spezielle Handhabung für andere Formen als Rechtecke. Sie können jedoch die Funktion überschreiben, die die Knotenform (renderer.drawNode (yourDrawNode)) zeichnet. Sie können ein Beispiel dafür sehen, wie das funktioniert hier: http://cpettitg.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html. Alternativ können Sie HTML verwenden, indem Sie das Label mit einem HTML-Element starten. Siehe das Etikett für Knoten A in diesem Beispiel: http://cpettitg.github.io/project/dagre-d3/latest/demo/interactive-demo.html. –
Danke Chris. Es ist sehr hilfreich. –