Sto provando a disegnare un grafico aciclico diretto utilizzando d3.js. Durante la ricerca del layout, mi sono imbattuto in Dagre ma sembra essere di minore utilità in quanto non voglio usare il codice basato sul DOT ovunque. Se qualcuno conosce la pura soluzione Javascript per questo o il plug-in/layout personalizzato per DAG, per favore fatemelo sapere. Grazie in anticipo.Grafico aciclico diretto utilizzando d3.js senza DOT
Autore Dagre qui. Dagre non include alcun codice graphviz - è puro JavaScript. Tuttavia, si basa su tecniche di layout simili; entrambi sono basati su tecniche della carta Sugiyama.
Potete trovare alcuni esempi di Dagre qui:
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
La fonte minified può essere trovato qui: http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js. Si avvicina a circa 44K.
Il rendering di grafici aciclici diretti (ed effettivamente evidenziando la proprietà directness) è un dominio degli algoritmi di layout Sugiyama.
Fondamentalmente assegnano i livelli (tramite un ordinamento topologico) ai nodi e quindi calcolano una sequenza per i nodi nei livelli. Usando prima un semplice euristico per invertire i cicli, questo funziona bene anche per i grafici ciclici. Graphviz DOT ha un'implementazione di questo layout chiamato dot, che è anche il nome del formato di file che utilizza, quindi a volte c'è un po 'di confusione quando viene menzionato DOT.
Ovviamente ci sono altre implementazioni dell'algoritmo, anche una versione di punto punteggiata cross-compilata è available. La soluzione probabilmente più completa di funzionalità disponibile per Javascript è l'implementazione commerciale dell'algoritmo nella libreria yFiles. Quindi, se questo è in uno scenario commerciale, potresti voler dare un'occhiata allo live demo corrispondente. Si noti che sebbene yFiles sia dotato della propria implementazione di rendering e editor, è comunque possibile collegare il codice in d3.js, poiché gli algoritmi di layout possono essere utilizzati come implementazioni standalone per "solo" calcolare le coordinate dei nodi, i punti di connessione del bordo, le curve e le etichette. Questa implementazione specifica supporta un gran numero di vincoli aggiuntivi, come "Port Constraints" (per limitare la direzione dei fronti in uscita e in entrata e le loro posizioni esatte ai nodi), nodi raggruppati gerarchicamente (dove ogni nodo può avere un nodo genitore e il nodo genitore "contiene" tutti i suoi nodi figli), i vincoli di livello e sequenza, i vincoli di etichettatura degli spigoli, i diversi stili di routing dei bordi, il routing del bus e altro.
Disclosure: Lavoro per la società che crea la suddetta biblioteca, tuttavia su SO non rappresento il mio datore di lavoro.
Grazie. Fondamentalmente, sto cercando di evitare l'utilizzo di graphViz in quanto richiede la compilazione per ciascun sistema operativo, ma darò un'occhiata a yFiles. –
@AmitGupta: la versione Javascript-Compiled di GraphViz non ha bisogno di essere "ricompilata", ovviamente. Tuttavia sembra ancora un enorme binario binario nel browser - non ha una vera API, ma è più simile a un'applicazione console, anche nel browser. – Sebastian
Sì. Sono d'accordo. Sembra che ci sia bisogno di un layout personalizzato. –
Grazie Chris. Ho studiato Dagre in dettaglio ora, ma non sono ancora chiaro su alcuni aspetti: 1. Può gestire cicli nel grafico, non è un grosso limite? 2. Posso avere icone invece di forme base nel layout grafico? –
1) Può gestire grafici con cicli. 2) Non ha una gestione speciale per forme diverse dai rettangoli. Tuttavia, è possibile sovrascrivere la funzione che disegna la forma del nodo (renderer.drawNode (yourDrawNode)). Puoi vedere un esempio di come funziona qui: http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html. In alternativa, è possibile utilizzare HTML, avviando l'etichetta con un elemento HTML. Vedere l'etichetta per il nodo A in questo esempio: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html. –
Grazie Chris. È davvero utile –