Libreria di visualizzazione di grafici in JavaScript

Ho una struttura di dati che rappresenta un grafico diretto e voglio renderlo dinamicamente su una pagina HTML. Questi grafici di solito sono solo alcuni nodi, forse dieci nella parte più alta, quindi la mia ipotesi è che le prestazioni non saranno un grosso problema. Idealmente, vorrei essere in grado di collegarlo con jQuery in modo che gli utenti possano modificare manualmente il layout trascinando i nodi.

Nota: non sto cercando una biblioteca per grafici.

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

È JavaScript con layout grafico diretto, SVG e puoi persino trascinare i nodi. Ha ancora bisogno di qualche modifica, ma è totalmente utilizzabile. Crea nodi e bordi facilmente con il codice JavaScript in questo modo:

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

Ho usato la libreria Raphael JS precedentemente citata (l'esempio graffle) più un po 'di codice per un algoritmo di layout grafico basato sulla forza che ho trovato in rete (tutto open source, licenza MIT). Se hai qualche commento o hai bisogno di una certa 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 "Nodo / bordo grafico" filtra per quelle di visualizzazione del grafico.

• DataVisualization.ch ha valutato molte biblioteche, comprese quelle di nodi / grafici. 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 / bordi, oltre a linee temporali e grafici 2D / 3D. Auto-layout, auto-clustering, motore fisico elastico, ottimizzazione per dispositivi mobili, navigazione da tastiera, layout gerarchico, animazione, ecc. MIT concesso in licenza e sviluppato da una società olandese specializzata nella ricerca su reti auto-organizzanti.

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

• JavaScript InfoVis Toolkit - Jit, un framework interattivo di disegno grafico e layout multiuso. Vedi ad esempio l' albero iperbolico . Costruito dall'architetto dataviz di Twitter Nicolas Garcia Belmonte e acquistato da Sencha nel 2010.

• D3.js Potente libreria di visualizzazione JS multiuso, il successore di Protovis. Vedi l' esempio del grafico a forza forzata e altri esempi di grafici nella galleria .

• La libreria di visualizzazione JS di Plotly utilizza D3.js con i collegamenti JS, Python, R e MATLAB. Vedi un esempio di Nexworkx in IPython qui , esempio di interazione umana qui e JS Embed API .

• sigma.js Libreria leggera ma potente per disegnare grafici

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

• Springy - un algoritmo di layout grafico orientato alla forza

• Processing.js porto Javascript della libreria di elaborazione da John Resig

• JS Graph It : trascina le caselle collegate da linee rette. Disposizione automatica minima delle linee.

• RaphaelJS's Graffle - esempio grafico interattivo di una libreria di disegno vettoriale multiuso generica. RaphaelJS non può impaginare automaticamente i nodi; avrai bisogno di un'altra biblioteca per quello.

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

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

Biblioteche commerciali

• Libreria di layout e disegno grafico interattivo GoJS

• yFile per la libreria di layout e disegno grafico commerciale HTML

• Toolkit di visualizzazione della rete commerciale JS KeyLines

• ZoomCharts Libreria di visualizzazione multiuso commerciale

• Diagramma JavaScript Syncfusion Libreria di diagrammi commerciali per disegno e visualizzazione.

Biblioteche abbandonate

• Visualizzatore di JS Network di Cytoscape Web Embeddable (nessuna nuova funzionalità pianificata; riuscita da Cytoscape.js)

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

• arbor.js Grafica sofisticata con bella fisica e piacere per gli occhi. Abbandonato nel maggio 2012. Esistono diverse forche semi-mantenute .

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

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

• Protovis Graphical Toolkit for Visualization (JavaScript). Sostituito da d3.

• Rappresentazione MoS Wheel Interactive JS per connessioni e relazioni (2008)

• Script di visualizzazione dei grafici dell'era 2007 di JSViz

• dagre Layout grafico per JavaScript

Librerie non Javascript

• Graphviz Linguaggio di visualizzazione grafico sofisticato

  • Graphviz è stato compilato in Javascript usando Emscripten qui con una demo interattiva online qui

• Flare Bello e potente disegno grafico basato su Flash

• Visualizzazione del grafico NodeBox Python

Disclaimer: sono uno sviluppatore di Cytoscape.js

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

• selettori per query e filtri ( cy.elements("node[weight >= 50].someClass")fa tutto ciò che ti aspetteresti),
• concatenamento (ad es. cy.nodes().unselect().trigger("mycustomevent")),
• Funzioni simili a jQuery per l'associazione ad eventi,
• elementi come raccolte (come jQuery ha raccolte di HTMLDomElements),
• estensibilità (può aggiungere layout personalizzati, interfaccia utente, funzioni core 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

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

prefuse è un insieme di strumenti software per la creazione di visualizzazioni di dati interattivi avanzati in Java. flare è una libreria ActionScript per la creazione di visualizzazioni eseguite in Adobe Flash Player, abbandonata dal 2012.

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

Offre:

• Importazione semplice di dati personalizzati ( questa demo online interattiva sembra praticamente fare esattamente ciò che l'OP stava cercando)
• Modifica interattiva per la creazione e la manipolazione dei diagrammi tramite gesti dell'utente (vedi l' editor completo )
• Un'enorme API di programmazione per personalizzare ogni aspetto della libreria
• Supporto per raggruppamento e annidamento (sia interattivo che tramite algoritmi di layout)
• Non dipende da un toolkit specifico dell'interfaccia utente, ma supporta l' integrazione in quasi tutti i toolkit Javascript esistenti (vedere le demo "di integrazione" )
• Layout automatico (vari stili, come "gerarchico", "organico", "ortogonale", "albero", "circolare", "radiale" e altro)
• Instradamento dei bordi sofisticato automatico (orlatura ortogonale e organica con prevenzione degli ostacoli)
• Layout incrementale e parziale (aggiunta e rimozione di elementi e modifica solo leggermente o per nulla del resto del diagramma)
• Supporto per raggruppamento e annidamento (sia interattivo che tramite algoritmi di layout)
• Implementazione di algoritmi di analisi dei grafici (percorsi, centralità, flussi di rete, ecc.)
• Utilizza tecnologie HTML 5 come SVG + CSS e Canvas e le moderne proprietà di sfruttamento di Javascript e altre funzionalità ES5 ed ES6 (ma per lo stesso motivo non funzioneranno con IE versione 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.

Come ha detto guruz, JIT ha diversi layout grafici / ad albero, tra cui visualizzazioni RGraph e HyperTree piuttosto allettanti.

Inoltre, ho appena implementato un'implementazione super-semplice basata su SVG su github (nessuna dipendenza, ~ 125 LOC) che dovrebbe funzionare abbastanza bene per i piccoli grafici visualizzati nei browser moderni.