Grafiek visualisering biblioteek in JavaScript

StackOverflow https://stackoverflow.com/questions/7034

Vra

Ek het 'n datastruktuur wat 'n gerigte grafiek verteenwoordig, en ek wil dinamies maak dat op 'n HTML bladsy. Hierdie grafieke sal gewoonlik net 'n paar knope, miskien tien op die heel boonste punt, so ek dink dat prestasie is nie van plan om 'n groot deal. Die ideaal is, sou ek graag in staat wees om dit te haak in met jQuery, sodat gebruikers die uitleg met die hand kan aanpas deur die nodes om te sleep.

Let wel: Ek is nie op soek na 'n kartering biblioteek

.
Was dit nuttig?

Oplossing

http://www.graphdracula.net :

Ek het net saam wat jy kan soek na sit

Dit is JavaScript met regie grafiek layout, SVG en jy kan selfs die nodes om te sleep. Moet nog 'n paar opstel, maar is heeltemal bruikbaar. Jy skep knope en rande maklik met JavaScript kode soos volg: 

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

Ek gebruik die voorheen genoem Raphael JS biblioteek (die graffle voorbeeld) plus 'n paar kode vir 'n krag gebaseer grafiek uitleg algoritme ek gevind op die net (alles open source, MIT lisensie). As jy enige kommentaar het of 'n sekere funksie nodig het, kan ek dit implementeer, net vra!

Wil jy dalk 'n blik op ander projekte het ook! Hier is 'n twee meta-vergelykings:

  • SocialCompare het 'n uitgebreide lys van biblioteke , en die "Node / rand grafiek" lyn sal filtreer vir grafiek visualisering kinders.

  • DataVisualization.ch het baie biblioteke, insluitend node / grafiek kinders geëvalueer. Ongelukkig is daar geen direkte skakel sodat jy het om te filter vir "grafiek": Seleksie DataVisualization.ch

Hier is 'n lys van soortgelyke projekte (sommige is reeds hier genoem):

Pure JavaScript biblioteke

  • vis.js ondersteun baie soorte netwerk / rand grafieke, plus tydlyne en 2D / 3D kaarte. Auto-uitleg, motor-groepering, veerkragtige fisika-enjin, selfoon-vriendelike, klawerbord navigasie, hiërargiese uitleg, animasie, ens MIT lisensie en ontwikkel deur 'n Nederlandse firma wat spesialiseer in navorsing oor self-organiserende netwerke.

  • Cytoscape.js - interaktiewe grafiek analise en visualisering met Selfoon-ondersteuning, volgende jQuery konvensies. Befonds via NIH toelaes en ontwikkel deur deur @maxkfranz (sien sy antwoord in die blokkie ) met die hulp van verskeie universiteite en ander organisasies.

  • Die JavaScript InfoVis Toolkit - JIT, 'n interaktiewe, multi-purpose grafiek teken en uitleg raamwerk. Sien byvoorbeeld die Hiperboliese Tree . Gebou deur Twitter DataViz argitek Nicolas Garcia Belmonte en gekoop deur Sencha in 2010

  • D3.js kragtige veeldoelige JS visualisering biblioteek, die opvolger van Protovis. Sien die -krag gerig grafiek voorbeeld en ander grafiek voorbeelde in die galery .

  • Plotly se JS visualisering biblioteek gebruik D3.js met JS, Python, R, en MATLAB bindings. Sien 'n nexworkx voorbeeld in IPython hier , interaksie voorbeeld menslike hier , en JS Gedagte API .

  • sigma.js Liggewig maar kragtige biblioteek vir die opstel graPHS

  • jsPlumb jQuery plug-in vir die skep van interaktiewe verbind grafieke

  • Springy - 'n krag gerig grafiek uitleg algoritme

  • Processing.js Javascript hawe van die Processing biblioteek deur John Resig

  • JS Grafiek Dit - drag'n'drop bokse met mekaar verbind deur reguitlyne . Minimale motor-uitleg van die lyne.

  • RaphaelJS se Graffle - interaktiewe grafiek voorbeeld van 'n generiese veeldoelige vektor tekening biblioteek. RaphaelJS kan nie uitleg nodes outomaties; jy sal 'n ander biblioteek vir daardie nodig.

  • JointJS Core - David Durman se-LPW gelisensieer open source diagram biblioteek. Dit kan gebruik word om óf statiese diagramme of ten volle interaktiewe diagram gereedskap en toepassing bouers te skep. Werk in blaaiers ondersteun SVG. Uitleg algoritmes nie ingesluit in die kern pakket

  • mxGraph Voorheen kommersiële HTML 5 diagram biblioteek, nou beskikbaar onder Apache v2.0. mxGraph is die basis biblioteek gebruik in draw.io .

Kommersiële biblioteke

Abandoned biblioteke

  • Cytoscape Web Inlegbare JS Network kyker (geen nuwe funksies beplan; opgevolg deur Cytoscape.js)

  • Canviz JS vertoning vir Graphviz grafieke. Abandoned in September 2013.

  • arbor.js Gesofistikeerd grafiese met 'n mooi fisika en eye-candy. Verlate in Mei 2012. Verskeie semi-gehandhaaf vurke bestaan.

  • jssvggraph "Die eenvoudigste moontlike krag gerig grafiek uitleg algoritme geïmplementeer as 'n JavaScript-biblioteek wat gebruik SVG voorwerpe ". Verlate in 2012.

  • jsdot kliënt kant grafiek teken aansoek. Abandoned in 2011 .

  • Protovis Grafiese Toolkit vir Visualisering (JavaScript). Vervang deur d3.

  • Moo Wheel Interaktiewe JS verteenwoordiging vir verbindings en verhoudings (2008)

  • JSViz 2007-era grafiek visualisering script

  • dagre Grafiek uitleg JavaScript vir

Nie-JavaScript biblioteke

Ander wenke

Disclaimer: Ek is 'n ontwikkelaar van Cytoscape.js

Cytoscape.js is 'n HTML5 grafiek visualisering biblioteek. Die API is gesofistikeerd en volg jQuery konvensies, insluitend

  • keurders vir die gebruik daarvan en filter (cy.elements("node[weight >= 50].someClass") doen soveel as wat jy sou verwag),
  • chaining (bv cy.nodes().unselect().trigger("mycustomevent")),
  • jQuery-agtige funksies vir binding aan gebeure,
  • elemente as versamelings (soos jQuery het versamelings van HTMLDomElements),
  • rekbaarheid (kan persoonlike layouts, UI, kern & versameling funksies, en so aan by te voeg),
  • en nog baie meer.

As jy dink oor die bou van 'n ernstige webapp met grafieke, moet jy ten minste oorweeg Cytoscape.js. Dit is gratis en open-source:

http://js.cytoscape.org

JsVIS was 'n bietjie mooi, maar stadig met groter grafieke, en het in die steek gelaat sedert 2007.

prefuse is 'n versameling van sagteware gereedskap vir die skep van ryk interaktiewe data visualisaties in Java. flare is 'n Action biblioteek vir die skep van visualisaties wat uitgevoer word in die Adobe Flash Player, verlate sedert 2012.

In 'n kommersiële scenario, 'n ernstige deelnemer vir seker is yFiles vir HTML :

Dit bied:

  • Maklik invoer van persoonlike data ( hierdie interaktiewe aanlyn demo lyk pretty much weet presies wat die oP is op soek na)
  • Interaktiewe redigering vir die skep en te manipuleer die diagramme deur gebruiker gebare (sien die volledige redakteur )
  • 'n Groot programmering API vir die opstel van elke aspek van die biblioteek
  • Ondersteuning vir groepering en nes (beide interaktiewe, sowel as deur die uitleg algoritmes)
  • is nie afhanklik van 'n specfic UI toolkit maar ondersteun integrasie in byna enige bestaande Javascript toolkit (sien die " integrasie "demos )
  • Outomatiese uitleg (verskillende style, soos "hiërargiese", "organiese", "ortogonale", "boom", "omsendbrief", "radiale", en nog baie meer)
  • Outomatiese gesofistikeerde rand routing (ortogonale en organiese rand routing met hindernis vermyding)
  • Inkrementele en gedeeltelike uitleg (voeg en te verwyder elemente en net 'n bietjie of glad nie die verandering van die res van die diagram)
  • Ondersteuning vir groepering en nes (beide interaktiewe, sowel as deur die uitleg algoritmes)
  • implementering van grafiek analise algoritmes (paaie, centralities, netwerk vloei, ens.)
  • Gebruik HTML 5 tegnologie soos SVG + CSS en doek en moderne Javascript gebruik te maak van eiendomme en ander meer ES5 en ES6 funksies (maar vir dieselfde rede sal nie uitgevoer word in Internet Explorer weergawes 8 en laer).
  • Gebruik 'n modulêre API wat gelaai kan word op aanvraag met behulp van UMD loaders

Hier is 'n voorbeeld weergawe dat die meeste van die versoek funksies toon:

Screenshot van 'n monster lewering geskep deur die BPMN demo.

Volledige openbaarmaking: Ek werk vir yWorks, maar op Stackoverflow ek nie my werkgewer verteenwoordig

.

As guruz genoem, die JIT het verskeie pragtige grafiek / boom layouts, insluitend baie aantreklik RGraph en HyperTree visualisaties.

Ook, Ek het net sit 'n super eenvoudige SVG gebaseer implementering by GitHub (geen afhanklikhede, ~ 125 LOC) wat goed genoeg vir klein grafieke vertoon in moderne blaaiers moet werk.

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top