source - javascript render dot




Reine JavaScript Graphviz Äquivalent (4)

Kennt jemand eine reine Javascript-basierte Implementierung der gerichteten Flussdiagramme, die GraphViz erzeugen kann? Ich interessiere mich NICHT für die Ausgabe hübscher Grafiken, sondern für die Berechnung der maximalen Tiefe jedes Knotens sowie für das Layout von Bezier-Linien, die optimiert sind, um die Anzahl der Schnittkanten zu minimieren, wenn Sie mit einem Graph statt mit einem Baum arbeiten von Informationen. Ich möchte diesen Code sowohl innerhalb eines Browsers ausführen; Ich bin mir bewusst, dass ich Graphviz problemlos als Erweiterung in meinen Node-Server einbetten oder sogar popen() und über Diagramminformationen im .dot Format streamen kann.

Als Referenz sehen Sie hier eine typische GraphViz-Ausgabe. Beachten Sie, wie Elemente gestapelt und voneinander beabstandet sind, damit die Verbindungslinien zwischen Knoten verlaufen können, ohne sich (sehr oft) zu schneiden oder Knoten zu passieren.


Dies ist kein vorgefertigter Graphviz-Ersatz, aber d3.js ist eine Bibliothek, die aus gegebenen Daten verschiedene Layouts erstellen kann und eine großartige Plattform für die Implementierung von graphviz darstellt.

Hier ist ein Beispiel für kraftgerichtete Layouts, das ist eine Form dessen, was graphviz tut.

Hier ist eine Rede über Layouts mit wahnsinnig tollen interaktiven Folien .

Um das Projekt kennen zu lernen, sind die tutorials sehr gut.



Nach langem Suchen fand ich die Antwort.

Die Lösung bestand darin, dass jemand Graphviz mit llvm + emscripten in Javascript kompilierte. Hier ist der Link:

http://viz-js.com/

Die Quelle finden Sie unter: https://github.com/mdaines/viz.js

Und um einfach eine Webseite hochzuladen, benutzen Sie:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");

Nachdem ich alle Optionen betrachtet hatte, fand ich viz.js ( https://github.com/mdaines/viz.js/ ) basierend auf jsviz und graphviz.js, um tatsächlich eine API zu haben, die von einer Webseite verwendbar ist, und genügend Beispiele dafür verstehen.





graphviz