Grafică de vizualizare bibliotecă în JavaScript

Am o structură de date care reprezintă un grafic direcționat și vreau să o redau dinamic pe o pagină HTML. Aceste grafice vor fi de obicei doar câteva noduri, poate zece la capătul superior, deci presupun că performanța nu va fi o afacere mare. În mod ideal, aș dori să fiu capabil să o cuplez cu jQuery, astfel încât utilizatorii să poată modifica manual aspectul prin tragerea nodurilor în jurul lor.

Notă: Nu caut o bibliotecă de diagramă.

0
fr hi bn
adăugat autor linker, sursa

4 răspunsuri

Disclaimer: Sunt dezvoltator al Cytoscape.js

Cytoscape.js este o bibliotecă de vizualizare grafică HTML5. API-ul este sofisticat și urmează convențiile jQuery, inclusiv

  • selectors for querying and filtering (cy.elements("node[weight >= 50].someClass") does much as you would expect),
  • chaining (e.g. cy.nodes().unselect().trigger("mycustomevent")),
  • jQuery-like functions for binding to events,
  • elements as collections (like jQuery has collections of HTMLDomElements),
  • extensibility (can add custom layouts, UI, core & collection functions, and so on),
  • and more.

Dacă vă gândiți să construiți un webapp serios cu grafice, ar trebui să luați în considerare cel puțin Cytoscape.js. Este gratuit și open-source:

http://js.cytoscape.org

0
adăugat
Are o modalitate de a structura grafice într-o ordine ierarhică (un aspect care arată ca un copac, dar este de fapt un grafic, adică există noduri cu mai mulți părinți)
adăugat autor Mina, sursa
Toate API-urile sunt documentate pe deplin. Documentele vă ajută chiar să începeți să începeți (adică init). Există exemple care rulează și pentru API-urile individuale și există demonstrații live. Funcționalitatea este cu mult mai mare decât orice grafic JS lib și documentele sunt mai extinse decât cele mai multe proiecte - fie comerciale, fie deschise. Ce anume lipsește pentru tine în docs?
adăugat autor maxkfranz, sursa
Atât aspectul dagre, cât și cel de lățime de pânză funcționează pentru acel caz
adăugat autor maxkfranz, sursa
Imutabilitatea nu înseamnă inflexibilitate - ea tinde doar să păstreze lucrurile fiabile și consecvente. Consultați eles.move() și următoarele extensii : edgehandles , < cod> editare de margine , adăugat autor maxkfranz, sursa
Ok, îmi pare rău de rău. Nu m-am uitat cum trebuie. Da, este bine documentat.
adăugat autor Storm, sursa
Trebuie să editez graficul cu tragere de săgeți începând sfârșitul și sfârșitul sfârșitului. Această bibliotecă spune că aceste lucruri sunt imuabile. Deci trebuie să caut o altă bibliotecă ...
adăugat autor Evgeniy Philippov, sursa

JsVIS was pretty nice, but slow with larger graphs, and has been abandoned since 2007.

prefuse is a set of software tools for creating rich interactive data visualizations in Java. flare is an ActionScript library for creating visualizations that run in the Adobe Flash Player, abandoned since 2012.

0
adăugat
-1 - prefuzarea este Java, nu JavaScript. Flare este Flash, de asemenea, nu JavaScript. JsVIS este buggy și învechit.
adăugat autor anatoly techtonik, sursa
@animuson: un alt subiect: OP a cerut biblioteci JavaScript. Singura parte despre JS în răspuns este o bibliotecă care nu a fost dezvoltată încă din 2007.
adăugat autor Dan Dascalescu, sursa
Aceste biblioteci par a fi destul de vechi în acest moment, care sunt oamenii care folosesc astăzi? Sunt în mod special în căutarea complotului seriei independente x-y.
adăugat autor blong, sursa
-1 downvoting pentru a reduce semnificația răspunsului depășit
adăugat autor a20, sursa

I've just put together what you may be looking for: http://www.graphdracula.net

Este JavaScript cu layout-ul grafului direcționat, SVG și puteți trage chiar și nodurile în jur. Încă mai are nevoie de unele amănunte, dar este complet utilizabilă. Puteți crea cu ușurință noduri și muchii cu cod JavaScript ca acesta:

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

Am folosit biblioteca Raphael JS menționată mai sus (exemplul de șablon) plus un cod pentru un algoritm de structurare a graficului bazat pe forță pe care l-am găsit pe net (totul, open source, licență MIT). Dacă aveți observații sau aveți nevoie de o anumită caracteristică, pot să o pun în aplicare, adresați-vă doar!


Poate doriți să aruncați o privire și la alte proiecte! Mai jos sunt două meta-comparații:

  • SocialCompare conține o listă extinsă de biblioteci , iar linia "Nod / grafic de margine" va filtra pentru vizualizarea graficelor.

  • DataVisualization.ch a evaluat multe biblioteci, inclusiv cele de tip nod / grafic. Din păcate, nu există niciun link direct, astfel încât va trebui să filtrați pentru "grafic":  Selecția datelorVisualizare.ch

Iată o listă de proiecte similare (unele au fost deja menționate aici):

Pure JavaScript Libraries

  • vis.js supports many types of network/edge graphs, plus timelines and 2D/3D charts. Auto-layout, auto-clustering, springy physics engine, mobile-friendly, keyboard navigation, hierarchical layout, animation etc. MIT licensed and developed by a Dutch firm specializing in research on self-organizing networks.

  • Cytoscape.js - interactive graph analysis and visualization with mobile support, following jQuery conventions. Funded via NIH grants and developed by by @maxkfranz (see his answer below) with help from several universities and other organizations.

  • The JavaScript InfoVis Toolkit - Jit, an interactive, multi-purpose graph drawing and layout framework. See for example the Hyperbolic Tree. Built by Twitter dataviz architect Nicolas Garcia Belmonte and bought by Sencha in 2010.

  • D3.js Powerful multi-purpose JS visualization library, the successor of Protovis. See the force-directed graph example, and other graph examples in the gallery.

  • Plotly's JS visualization library uses D3.js with JS, Python, R, and MATLAB bindings. See a nexworkx example in IPython here, human interaction example here, and JS Embed API.

  • sigma.js Lightweight but powerful library for drawing graphs

  • jsPlumb jQuery plug-in for creating interactive connected graphs

  • Springy - a force-directed graph layout algorithm

  • Processing.js Javascript port of the Processing library by John Resig

  • JS Graph It - drag'n'drop boxes connected by straight lines. Minimal auto-layout of the lines.

  • RaphaelJS's Graffle - interactive graph example of a generic multi-purpose vector drawing library. RaphaelJS can't layout nodes automatically; you'll need another library for that.

  • JointJS Core - David Durman's MPL-licensed open source diagramming library. It can be used to create either static diagrams or fully interactive diagramming tools and application builders. Works in browsers supporting SVG. Layout algorithms not-included in the core package

  • mxGraph Previously commercial HTML 5 diagramming library, now available under Apache v2.0. mxGraph is the base library used in draw.io.

Biblioteci comerciale

  • GoJS Biblioteca interactivă de desen și grafică

  • yFiles pentru HTML Grafică grafică și bibliotecă de layout

  • KeyLines Toolkit de vizualizare a rețelei comerciale JS

  • ZoomCharts Bibliotecă de vizualizare multifuncțională comercială

Biblioteci abandonate

  • Cytoscape Web Vizualizator de rețea JS încorporat (nu au fost planificate noi caracteristici, au reușit de Cytoscape.js)

  • Canviz JS renderer pentru graficele Graphviz. Abandonat în septembrie 2013.

  • arbor.js Grafice sofisticate cu fizica drăguță și bomboane ochi. Abandonată în mai 2012. Există mai multe furcăre semi-întreținute .

  • jssvggraph "Cel mai simplu algoritm de arhitectură a graficului implementat ca o bibliotecă Javascript care folosește Obiecte SVG ". Abandonată în 2012.

  • jsdot Aplicație de desen grafic din partea clientului. Abandonat în 2011 .

  • Protovis Instrument grafic pentru vizualizare (JavaScript). Înlocuit de d3.

  • Roata Moo Reprezentarea JS interactivă pentru conexiuni și relații (2008)

  • JSViz script-ul de vizualizare a graficelor din epoca 2007

  • dagre Layout grafic pentru JavaScript

Biblioteci non-Javascript

0
adăugat
GraphDracula în sine pare a fi mort (nu a fost actualizată peste trei ani). Putem să-l adăugăm în lista "Biblioteci abandonate"?
adăugat autor machineghost, sursa
@JohannPhilippStrathausen Există o cale, aș putea adăuga un manipulator de evenimente pentru un nod? Vreau să înregistrez coordonatele X, Y pentru fiecare nod. (pentru graphdracula)
adăugat autor Suhail Gupta, sursa
Am creat o bibliotecă gratuită și ușoară care ar putea fi utilă altora: github.com/n- Yousefi / Arg-Graph
adăugat autor Naser Yousefi, sursa
Pot determina poziția unui Nod prin cod? (Redrawarea la poziții aleatorii ca în cazul de față nu este ceea ce majoritatea oamenilor s-ar aștepta!)
adăugat autor forsberg, sursa
dagre nu se mai dezvoltă în mod activ. Voi actualiza lista.
adăugat autor david, sursa
Nu pot edita, dar Almende . Am creat un dicționar vizual , pe baza acestuia.
adăugat autor Val, sursa
ZoomCharts face o vizualizare grafică plăcută utilizând componenta grafică netă.
adăugat autor jancha, sursa
Da, margini direcționate sunt posibile! Utilizați g.addEdge ("cireșe", "mere", {"direcționate": true});
adăugat autor Johann Philipp Strathausen, sursa
Nu e mort. Tocmai am lansat câteva versiuni noi, verificați posturile și profilul github, vă rog.
adăugat autor Johann Philipp Strathausen, sursa
trebuie să adăugați și biblioteca chart.js & chartnew.js. și aceasta ( charts.livegap.com ) este generată pentru aceasta
adăugat autor Omar Sedki, sursa
O revizuire plăcută, susținută. De asemenea, există react-sigmajs - componentele React pentru SigmaJS, destul de ușor de utilizat
adăugat autor Max Vorobjev, sursa
Există încă două biblioteci demne de remarcat care pot fi adăugate pe listă, și anume Linkuroius.js și VivaGraphJS .
adăugat autor nikodem92, sursa
Există variante alternative pentru algoritmul de proiectare yFILES? Cum ar fi yworks.com/products/yfiles-layout-algorithms-for- cytoscape
adăugat autor Ryan Chou, sursa

Așa cum a menționat guruz, JIT are mai multe modele minunate de graf / arbore, incluzând vizualizările RGraph și HyperTree destul de atrăgătoare .

De asemenea, tocmai am pus un super-simplu implementare la github bazat pe SVG (nu există dependențe, ~ 125 LOC) care ar trebui să funcționeze suficient de bine pentru graficele mici afișate în browserele moderne.

0
adăugat
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com