Reines JavaScript Graphviz-Äquivalent [geschlossen]

139

Ist jemandem eine reine, auf Javascript basierende Implementierung der Richtungsflussdiagramme bekannt, die GraphViz generieren kann? Ich bin NICHT an hübschen visuellen Ausgaben interessiert, sondern an den Berechnungen zur Ermittlung der maximalen Tiefe jedes Knotens sowie an der Anordnung der Bezierlinien, die so optimiert sind, dass die Anzahl der sich überschneidenden Kanten minimiert wird, wenn es sich um ein Diagramm und nicht um einen Baum handelt von Informationen. Ich möchte diesen Code sowohl in einem Browser ausführen; Mir ist bewusst, dass ich Graphviz problemlos als Erweiterung oder sogar in meinen Node-Server einbetten popen()und über Grafikinformationen im .dotFormat streamen kann .

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

Geben Sie hier die Bildbeschreibung ein

javascript graphviz Armentage
quelle
Haben Sie ein Beispiel für ein solches Diagramm für diejenigen von uns, die mit GraphViz nicht vertraut sind?
Matt Ball
Dies scheint ein Duplikat des Graph-Visualisierungscodes in Javascript zu sein?
Daniel Pryden
3
Vielleicht - schau es dir an. Viele Kommentare und Antworten verweisen auf Diagrammwerkzeuge, die GraphViz überhaupt nicht ähneln oder nur GraphViz-Ausgaben zeichnen können, das Layout jedoch nicht selbst erstellen können.
Armentage

Antworten:

83

Schauen Sie sich diese reine JavaScript-Implementierung eines .dot-Canvas-Renderers an:

http://ushiroad.com/jsviz/

Die Bibliothek ist nicht dokumentiert - der Autor sollte sie definitiv mehr veröffentlichen und dokumentieren (ich werde ihn kontaktieren, um ihm vorzuschlagen, dass er sie zumindest auf Github veröffentlicht).

Update : Code wurde an github: https://github.com/gyuque/livizjs gesendet

Update (14/2/2013) : Ein weiterer Anwärter ist aufgetaucht ! Jeder, der sich für das Thema interessiert, sollte sich unbedingt die Beispielseite und das Github-Repo von Viz.js ansehen .

Update (16.07.2020) : (sieben Jahre später) http://webgraphviz.com/ ist auch großartig! :-)

Greg Sadetsky
quelle
1
Dieses Projekt sieht fantastisch aus und ist wahrscheinlich die beste Lösung von allen, die ich je gesehen habe, aber es wird definitiv einige Zeit dauern, bis die Quelle gefunden ist. Der Code scheint jedoch ziemlich vernünftig zu sein, so dass es vielleicht nicht so schlimm ist.
Captncraig
Bisher ist dies das, was ich in der ursprünglichen Frage gesucht habe. Es ist nicht nur ein RENDERER, es weiß auch, wie man den gerichteten Graphen berechnet. Läuft DOT irgendwo in einem Backend oder läuft der gesamte Algorithmus zur Graphengenerierung in meinem Browser?
Armentage
1
@Armentage, es läuft vollständig in Ihrem Browser. Graphviz wurde dank emscripten zu JavaScript kompiliert . Der Quellcode, obwohl nicht so dokumentiert wie er sein könnte, ist jetzt glücklicherweise (nachdem der Autor über Twitter und E-Mail genagt wurde) ;-) hier verfügbar . Das Projekt zu forken und eine benutzerfreundliche API dafür zu erstellen, wäre ein erster großer Schritt ..!
Greg Sadetsky
5
Ich wollte nur die Graph Dracula- Bibliothek zur Kandidatenliste hinzufügen . Hier können Sie eine Demo sehen . Es berechnet das Diagramm und zeigt es an (mit Raphael ). Der Code ist kurz und sauber.
Greg Sadetsky
Livizjs ist ein großartiges Tool, aber beachten Sie, dass es nicht die vollständige Sprache unterstützt, wie z. B. "Cluster"
SirLenz0rlot
37

Nachdem ich weit und tief gesucht hatte, fand ich endlich die Antwort.

Die Lösung bestand darin, dass jemand Graphviz mit llvm + emscripten über 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 aufzurufen, verwenden Sie:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");
Zachary Vorhies
quelle
Genau das habe ich auch gesucht
RobAu
5
Update: Ich habe eine Demo-Site erstellt, die zeigt, wie einfach und unterhaltsam das Einbinden in die viz.js ist! Überprüfen Sie es heraus bei www.webgraphviz.com
Zachary Vorhies
Die bereitgestellten Github-Links sind defekt
Jaime
2
github.com/mdaines/viz.js
Somu
19

Nachdem ich mir alle Optionen angesehen 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 aus verwendet werden kann, und genügend Beispiele dafür verstehen.

Jason Siefken
quelle
1
viz.js ist großartig und sehr einfach, nicht, dass es derzeit keine HTML-ähnlichen Labels unterstützt: graphviz.org/doc/info/shapes.html#html
SirLenz0rlot
11

Man könnte versuchen, graphviz in Javascript zu konvertieren, genau wie es für das Beispiel 'PDF Reader' gemacht wurde: https://github.com/kripken/emscripten

pedroteixeira
quelle
Dies ist ein wahnsinnig guter Vorschlag. Ich dachte daran, den Code selbst in JS zu übersetzen ...... aber dieser llvm-Trick ist wunderschöner Wahnsinn!
Armentage
Ich habe dies tatsächlich ein paar Versuche bis jetzt gegeben .. emscripten ist noch ziemlich jung, und die Dokumentation kurz. Auf jeden Fall ein großartiges Projekt, ich kann sehen, wie es viel Kraft liefern kann. Aber im Moment ist es etwas unhandlich, wenn Sie nicht der Typ sind, der es geschrieben hat.
Synthesizerpatel
8

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

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

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

Um das Projekt kennenzulernen, sind die Tutorials sehr gut.

w00t
quelle
1
github.com/cpettitt/dagre-d3 implementiert das DOT-Diagramm in JavaScript. Sie können mit der Demo unter cpettitt.github.io/project/dagre-d3/latest/demo/… spielen .
Arthur2e5