Libreria di visualizzazione di grafici in JavaScript

Question

Ho una struttura dati che rappresenta un grafico diretto e voglio renderla dinamicamente su una pagina HTML.Questi grafici saranno solitamente costituiti da pochi nodi, forse dieci all'estremità superiore, quindi suppongo che le prestazioni non saranno un grosso problema.Idealmente, mi piacerebbe poterlo collegare a jQuery in modo che gli utenti possano modificare manualmente il layout trascinando i nodi.

Nota:Non sto cercando una libreria di grafici.

Answer 1

Ho appena messo insieme quello che potresti cercare: http://www.graphdracula.net

È JavaScript con layout grafico diretto, SVG e puoi persino trascinare i nodi.Necessita ancora di qualche aggiustamento, ma è totalmente utilizzabile.Puoi creare facilmente nodi e bordi con codice JavaScript come questo:

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

Ho utilizzato la libreria Raphael JS menzionata in precedenza (l'esempio graffle) più del codice per un algoritmo di layout grafico basato sulla forza che ho trovato in rete (tutto open source, licenza MIT).Se hai commenti o hai bisogno di una determinata funzionalità, potrei implementarla, basta chiedere!

---

Potresti voler dare un'occhiata anche ad altri progetti!Di seguito sono riportati due meta-confronti:

• SocialCompare ha un ampio elenco di librerie e la riga "Grafico nodo / bordo" filtrerà per quelle di visualizzazione del grafico.

• DataVisualization.ch ha valutato molte librerie, comprese quelle di nodi/grafi.Sfortunatamente non esiste un collegamento diretto, quindi dovrai filtrare per "grafico":

Ecco un elenco di progetti simili (alcuni sono già stati menzionati qui):

Librerie JavaScript pure

• vis.js supporta molti tipi di grafici di rete/edge, oltre a linee temporali e grafici 2D/3D.Layout automatico, clustering automatico, motore fisico elastico, ottimizzazione per dispositivi mobili, navigazione da tastiera, layout gerarchico, animazione, ecc. Licenza MIT e sviluppato da un'azienda olandese specializzata nella ricerca sulle reti auto-organizzanti.

• Cytoscape.js - analisi e visualizzazione interattiva di grafici con supporto mobile, seguendo le convenzioni jQuery.Finanziato tramite sovvenzioni NIH e sviluppato da @maxkfranz (Vedere la sua risposta qui sotto) con l'aiuto di diverse università e altre organizzazioni.

• Il toolkit JavaScript InfoVis - Jit, un framework interattivo e multiuso per il disegno grafico e il layout.Vedi ad esempio il Albero iperbolico.Costruito dall'architetto Twitter Dataviz Nicolas Garcia Belmonte E comprato da Sencha nel 2010.

• D3.js Potente libreria di visualizzazione JS multiuso, il successore di Protovis.Vedi il grafico diretto dalle forze esempio e altri esempi di grafici nel file galleria.

• Di Plotly La libreria di visualizzazione JS utilizza D3.js con associazioni JS, Python, R e MATLAB.Vedi un esempio di nexworkx in IPython Qui, esempio di interazione umana Qui, E API di incorporamento JS.

• sigma.js Libreria leggera ma potente per disegnare grafici

• jsPlumb Plug-in jQuery per la creazione di grafici connessi interattivi

• Elastico - un algoritmo di layout grafico diretto dalle forze

• Processing.js Port Javascript della libreria Processing di John Resig

• JS graficalo - caselle drag'n'drop collegate da linee rette.Layout automatico minimo delle linee.

• Graffle di RaphaelJS - esempio di grafico interattivo di una generica libreria di disegni vettoriali multiuso.RaphaelJS non può disporre i nodi automaticamente;avrai bisogno di un'altra libreria per questo.

• JointJS Core - Libreria di diagrammi open source con licenza MPL di David Durman.Può essere utilizzato per creare diagrammi statici o strumenti di creazione di diagrammi e costruttori di applicazioni completamente interattivi.Funziona nei browser che supportano SVG.Algoritmi di layout non inclusi nel pacchetto principale

• mxGraph Libreria di diagrammi HTML 5 precedentemente commerciale, ora disponibile con Apache v2.0.mxGraph è la libreria di base utilizzata in draw.io.

Biblioteche commerciali

• GoJS Libreria interattiva di disegni grafici e layout

• yFile per HTML Libreria di disegni e layout di grafici commerciali

• Linee chiave Kit di strumenti commerciali per la visualizzazione della rete JS

• ZoomCharts Libreria di visualizzazione multiuso commerciale

• Diagramma JavaScript di sincronizzazione Libreria di diagrammi commerciali per il disegno e la visualizzazione.

Biblioteche abbandonate

• Rete del citoscape Visualizzatore di rete JS incorporabile (nessuna nuova funzionalità pianificata;sostituito da Cytoscape.js)

• Canviz JS renderer per i grafici Graphviz. Abbandonato nel settembre 2013.

• arbor.js Grafica sofisticata con fisica piacevole e piacere per gli occhi.Abbandonato nel maggio 2012.Parecchi semimantenuto esistono le forchette.

• jssvggraph "L'algoritmo di layout grafico diretto dalla forza più semplice possibile implementato come libreria Javascript che utilizza oggetti SVG".Abbandonato nel 2012.

• jsdot Applicazione di disegno grafico lato client. Abbandonato nel 2011.

• Protovis Toolkit grafico per la visualizzazione (JavaScript).Sostituito da d3.

• Ruota Muu Rappresentazione JS interattiva per connessioni e relazioni (2008)

• JSViz Script di visualizzazione dei grafici dell'era 2007

• dagre Layout grafico per JavaScript

Librerie non Javascript

• Graphviz Sofisticato linguaggio di visualizzazione dei grafici

  • Graphviz è stato compilato in Javascript utilizzando Emscripten Qui con un demo interattiva online qui

• Bagliore Bellissimo e potente disegno grafico basato su Flash

• NodeBox Visualizzazione di grafici Python

Answer 2

Disclaimer:Sono uno sviluppatore di Cytoscape.js

Cytoscape.js è una libreria di visualizzazione di grafici HTML5.L'API è sofisticata e segue le convenzioni jQuery, incluse

• selettori per interrogare e filtrare (cy.elements("node[weight >= 50].someClass") fa tutto quello che ti aspetteresti),
• concatenamento (es. cy.nodes().unselect().trigger("mycustomevent")),
• Funzioni simili a jQuery per l'associazione a eventi,
• elementi come raccolte (come jQuery ha raccolte di HTMLDomElements),
• estensibilità (può aggiungere layout personalizzati, interfaccia utente, funzioni principali e di raccolta e così via),
• e altro ancora.

Se stai pensando di creare una webapp seria con grafici, dovresti almeno considerare Cytoscape.js.È gratuito e open source:

http://js.cytoscape.org

Answer 3

JsVIS era piuttosto carino, ma lento con grafici più grandi ed è stato abbandonato dal 2007.

prefuso è un insieme di strumenti software per la creazione di ricche visualizzazioni interattive di dati in Java. bagliore è una libreria ActionScript per la creazione di visualizzazioni eseguite in Adobe Flash Player, abbandonata dal 2012.

Answer 4

In uno scenario commerciale, un concorrente serio lo è sicuramente yFile per HTML:

Offre:

• Facile importare di dati personalizzati (questa demo online interattiva sembra praticamente fare esattamente quello che l'OP stava cercando)
• Editing interattivo per creare e manipolare i diagrammi attraverso i gesti dell'utente (vedi il file completo editore)
• Una enorme API di programmazione per personalizzare ogni aspetto della libreria
• Supporto per raggruppamento E Nidificazione (sia interattivo, sia attraverso gli algoritmi di layout)
• Non dipende da uno specifico toolkit dell'interfaccia utente ma supporta integrazione in quasi tutti i toolkit Javascript esistenti (vedere il file demo di "integrazione".)
• Layout automatico (vari stili, come "gerarchico", "organico", "ortogonale", "albero", "circolare", "radiale" e altro)
• Instradamento automatico dei bordi sofisticato (instradamento dei bordi ortogonali e organici con evitamento degli ostacoli)
• Layout incrementale e parziale (aggiunta e rimozione di elementi e modifica solo minima o nulla del resto del diagramma)
• Supporto per raggruppamento e annidamento (sia interattivo, sia attraverso gli algoritmi di layout)
• Implementazioni di algoritmi di analisi dei grafici (percorsi, centralità, flussi di rete, ecc.)
• Utilizza tecnologie HTML 5 come SVG+CSS e Canvas e moderne proprietà di sfruttamento di Javascript e altre funzionalità ES5 ed ES6 (ma per lo stesso motivo non verrà eseguito nelle versioni IE 8 e precedenti).
• Utilizza un'API modulare che può essere caricata su richiesta utilizzando i caricatori UMD

Ecco un rendering di esempio che mostra la maggior parte delle funzionalità richieste:

Informativa completa:Lavoro per yWorks, ma su Stackoverflow non rappresento il mio datore di lavoro.

Answer 5

Come ha detto guruz, il JIT ha diversi adorabili layout di grafici/alberi, incluse visualizzazioni RGraph e HyperTree piuttosto accattivanti.

Inoltre, ho appena creato un semplicissimo file basato su SVG implementazione su github (nessuna dipendenza, ~125 LOC) che dovrebbe funzionare abbastanza bene per i piccoli grafici visualizzati nei browser moderni.