web-dev-qa-db-fra.com

Équivalent Pure JavaScript Graphviz

Quelqu'un est-il au courant d'une implémentation pure, basée sur Javascript, des diagrammes de flux directionnels que GraphViz est capable de générer? Je ne suis PAS intéressé par les jolis effets visuels, mais par les calculs permettant de déterminer la profondeur maximale de chaque nœud, ainsi que par la disposition des lignes de Bézier optimisées pour réduire le nombre d'arêtes se croisant lorsque vous utilisez un graphique plutôt qu'un arbre. d'information. Je voudrais exécuter ce code à la fois dans un navigateur; Je suis conscient que je pourrais facilement intégrer Graphviz à mon serveur Node en tant qu'extension, ou même popen() it et diffuser des informations de graphe au format .dot.

Pour référence, voici une sortie typique de GraphViz. Notez comment les éléments sont empilés et espacés pour permettre aux lignes de connexion de se déplacer entre les nœuds, sans se croiser (très souvent) ni passer par les nœuds.

enter image description here

136
Armentage

Jetez un coup d'œil à cette implémentation JavaScript pure d'un moteur de rendu de toiles .dot:

http: //ushiroad.com/jsviz/

La bibliothèque n'est pas documentée - l'auteur doit absolument la publier et la documenter davantage (je le contacterai pour lui suggérer de l'afficher sur github, à tout le moins).

Update : le code a été poussé vers github: https: //github.com/gyuque/livizjs

Mise à jour (14/2/2013) : un autre concurrent est apparu! Toute personne intéressée par le sujet devrait absolument jeter un coup d'œil sur le page d'exemple de == et github repo de Viz.js.

80
Greg Sadetsky

Après avoir cherché loin et bas, j'ai finalement trouvé la réponse.

La solution était que quelqu'un compilait Graphviz en Javascript avec llvm + emscripten. Voici le lien:

http://viz-js.com/

La source peut être trouvée à: https://github.com/mdaines/viz.js

Et pour obtenir simplement une page Web, utilisez:

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

Après avoir examiné toutes les options, j’ai trouvé viz.js ( https://github.com/mdaines/viz.js/ ) basé sur jsviz et graphviz.js comme disposant d’une API utilisable depuis une page Web et suffisamment d'exemples pour comprendre.

18
Jason Siefken

On pourrait essayer de convertir graphviz en javascript, comme ce fut le cas pour l'exemple du "lecteur PDF": https://github.com/kripken/emscripten

11
pedroteixeira

Ce n’est pas un substitut de graphviz prêt à l’emploi mais d3.js est une bibliothèque qui peut faire diverses mises en page à partir de données données et qui serait une excellente plate-forme pour mettre en œuvre graphviz.

Voici n exemple de dispositions dirigées par la force qui est une forme de ce que fait graphviz.

Voici n discours sur les mises en page avec incroyablement génial diapositives interactives .

Pour faire connaissance avec le projet, les tutoriels sont très bons.

8
w00t

Voici une compilation croisée de Graphviz vers Javascript réalisée avec Emscripten

https://github.com/bpartridge/graphviz.js

5
Paul Dixon