Puro JavaScript Graphviz equivalente [chiuso]


139

Qualcuno è a conoscenza di un'implementazione pura, basata su Javascript, dei diagrammi di flusso direzionale che GraphViz è in grado di generare? Non mi interessa l'output visivo piuttosto, ma i calcoli per capire la profondità massima di ciascun nodo, insieme al layout delle linee più bezier che sono ottimizzate per ridurre al minimo il numero di bordi intersecanti quando si ha a che fare con un grafico anziché con un albero di informazione. Vorrei eseguire questo codice sia all'interno di un browser; Sono consapevole che potrei facilmente integrare Graphviz nel mio server Node come estensione, o anche popen()esso e trasmettere in streaming le informazioni sui grafici nel .dotformato.

Per riferimento, ecco un tipico output GraphViz. Nota come gli elementi sono impilati e distanziati per consentire alle linee di connessione di spostarsi tra i nodi, senza intersecarsi (molto spesso) o passare attraverso i nodi.

inserisci qui la descrizione dell'immagine


Hai un esempio di tale diagramma, per quelli di noi che non hanno familiarità con GraphViz?
Matt Ball,

Questo sembra essere un duplicato del codice di visualizzazione
Daniel Pryden,

3
Forse - controllandolo. Molti commenti e risposte puntano a strumenti per la creazione di grafici che non assomigliano affatto a GraphViz o sono solo in grado di disegnare l'output di GraphViz, ma non possono eseguire il layout da soli.
Armentage,

Risposte:


84

Dai un'occhiata a questa pura implementazione JavaScript di un renderer di tela .dot:

http://ushiroad.com/jsviz/

La biblioteca non è documentata - l'autore dovrebbe sicuramente pubblicizzarla e documentarla di più (lo contatterò per suggerirgli di metterlo su github, almeno).

Aggiornamento : il codice è stato inviato a github: https://github.com/gyuque/livizjs

Aggiornamento (14/2/2013) : è sorto un altro contendente! chiunque sia interessato all'argomento dovrebbe assolutamente dare un'occhiata alla pagina di esempio di Viz.js e al repository github .

Aggiornamento (16/07/2020) : (sette anni dopo) http://webgraphviz.com/ è anche fantastico! :-)


1
Questo progetto sembra fantastico, ed è probabilmente la migliore soluzione di tutto ciò che ho visto, ma ci vorrà sicuramente un po 'di ricerca nella fonte per capire come usarlo. Il codice sembra abbastanza ragionevole, quindi potrebbe non essere così male.
captncraig,

Finora, questo è il più vicino a quello che stavo cercando nella domanda originale. Non è solo un RENDERER, ma sa anche come calcolare il grafico diretto. Esegue DOT su un backend da qualche parte o l'intero algoritmo di generazione dei grafici è in esecuzione sul mio browser?
Armentage,

1
@Armentage, funziona interamente nel tuo browser. Graphviz è stato compilato in JavaScript, grazie a emscripten . Il codice sorgente, sebbene non sia documentato come potrebbe essere, ora è fortunatamente (dopo aver assillato l'autore su Twitter e via e-mail) ;-) disponibile qui . Il fork del progetto e la creazione di un'API di facile utilizzo sarebbe un primo grande passo!
Greg Sadetsky

5
Volevo solo aggiungere la libreria Graph Dracula all'elenco dei candidati. Puoi vedere una demo qui . Calcola il grafico e lo visualizza (usando Raphael ); il codice è breve e pulito.
Greg Sadetsky,

Livizjs è un ottimo strumento, ma nota che non supporta l'intero linguaggio, come i "cluster"
SirLenz0rlot

37

Dopo aver cercato in lungo e in largo finalmente ho trovato la risposta.

La soluzione è stata che qualcuno ha compilato Graphviz in Javascript usando llvm + emscripten. Ecco il link:

http://viz-js.com/

La fonte è disponibile all'indirizzo: https://github.com/mdaines/viz.js

E per ottenere semplicemente una pagina Web, usa:

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

Questo è esattamente quello che stavo cercando
RobAu,

6
Aggiornamento: ho creato un sito dimostrativo che mostra come l'aggancio in viz.js sia facile e divertente! Dai un'occhiata a www.webgraphviz.com
Zachary Vorhies il

I collegamenti github forniti sono interrotti
Jaime



11

Si potrebbe provare a convertire graphviz in javascript, proprio come è stato fatto per l'esempio del "lettore PDF": https://github.com/kripken/emscripten


Questo è un suggerimento follemente grande. Stavo pensando di provare a tradurre il codice in JS me stesso ...... ma questo trucco di llvm è una bella follia!
Armentage,

In realtà ci ho dato un paio di tentativi finora .. emscripten è ancora piuttosto giovane, e la documentazione è breve. Sicuramente un grande progetto da guardare, posso vedere come potrebbe fornire molta potenza. Ma in questo momento se non sei il ragazzo che l'ha scritto è un po 'ingombrante.
synthesizerpatel,

8

Questa non è una sostituzione di Graphviz già pronta, ma d3.js è una libreria che può fare vari layout da dati dati e sarebbe un'ottima piattaforma su cui implementare Graphviz.

Ecco un esempio di layout forzati che è una forma di ciò che fa graphviz.

Ecco un discorso sui layout con diapositive interattive incredibilmente fantastiche .

Per conoscere il progetto, i tutorial sono molto buoni.


1
github.com/cpettitt/dagre-d3 implementa il diagramma DOT in JavaScript. Puoi giocare con la demo su cpettitt.github.io/project/dagre-d3/latest/demo/… .
Arthur2e5,

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.