Bibliothèque de visualisation de graphiques en JavaScript

J'ai une structure de données qui représente un graphe dirigé, et je veux en faire un rendu dynamique sur une page HTML. Ces graphes ne comportent généralement que quelques nœuds, peut-être dix au maximum, et je pense donc que les performances ne seront pas un problème majeur. Idéalement, j'aimerais pouvoir l&#8217associer à jQuery pour que les utilisateurs puissent modifier la disposition manuellement en faisant glisser les nœuds.

Remarque : je ne cherche pas une bibliothèque de graphiques.

Tim Post
Question modifiée 17 juillet 2015 в 6:36
Programmation
data-structures javascript jquery graph-layout
10 août 2008 в 4:07
13 vues
Solution

Je viens de créer ce que vous recherchez peut-être : http://www.graphdracula.net. C'est du JavaScript avec une mise en page en graphe dirigé, du SVG et vous pouvez même faire glisser les nœuds. Il faut encore le peaufiner, mais il est tout à fait utilisable. Vous créez facilement les nœuds et les bords avec du code JavaScript comme celui-ci :

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

J'ai utilisé la bibliothèque Raphael JS mentionnée précédemment (l'exemple de graffle) ainsi que du code pour un algorithme de disposition de graphe basé sur la force que j'ai trouvé sur le net (tout est open source, licence MIT). Si vous avez des remarques ou besoin d'une certaine fonctionnalité, je peux l'implémenter, il suffit de demander !

Vous voudrez peut-être jeter un coup d'oeil à d'autres projets, aussi ! Vous trouverez ci-dessous deux méta-comparaisons :

  • SocialCompare a une liste étendue de bibliothèques, et la ligne "Node / edge graph&quot ; filtrera pour les visualisations de graphiques.
  • DataVisualization.ch a évalué de nombreuses bibliothèques, y compris des bibliothèques de nœuds/graphes. Malheureusement, il n&#8217y a pas de lien direct, vous devrez donc filtrer pour "graph" :![Sélection DataVisualization.ch][1] Voici une liste de projets similaires (certains ont déjà été mentionnés ici) :

    Bibliothèques purement JavaScript

  • vis.js prend en charge de nombreux types de graphes de réseau/de bord, ainsi que des lignes de temps et des graphiques 2D/3D. Mise en page automatique, regroupement automatique, moteur physique élastique, convivialité mobile, navigation au clavier, mise en page hiérarchique, animation, etc. [* Licence MIT] (https://github.com/almende/vis) et développé par une société néerlandaise spécialisée dans la recherche sur les réseaux auto-organisés.
  • Cytoscape.js - analyse et visualisation interactives de graphes avec support mobile, suivant les conventions jQuery. Financé par des subventions du NIH et développé par @maxkfranz (voir sa réponse ci-dessous) avec l'aide de plusieurs universités et autres organisations.
  • The JavaScript InfoVis Toolkit - Jit, une structure interactive et polyvalente de dessin et de mise en page de graphiques. Voir par exemple l'Arbre hyperbolique. Construit par l'architecte de dataviz de Twitter Nicolas Garcia Belmonte et racheté par Sencha en 2010.
  • D3.js](http://d3js.org/) Puissante bibliothèque de visualisation JS polyvalente, successeur de Protovis. Voir l'exemple de force-directed graph et d'autres exemples de graphiques dans la galerie.
  • La bibliothèque de visualisation JS Plotly's utilise D3.js avec des liaisons JS, Python, R et MATLAB. Voir un exemple de nexworkx en IPython ici, un exemple d'interaction humaine ici, et JS Embed API.
  • sigma.js](http://sigmajs.org/) Bibliothèque légère mais puissante pour dessiner des graphiques.
  • jsPlumb](http://jsplumbtoolkit.com/) Plug-in jQuery pour la création de graphiques interactifs connectés.
  • Springy](http://getspringy.com/) - un algorithme d'agencement de graphiques dirigé par la force.
  • Processing.js Portage Javascript de la bibliothèque Processing de John Resig.
  • JS Graph It - des boîtes à glisser-déposer reliées par des lignes droites. Mise en page automatique minimale des lignes.
  • RaphaelJS's Graffle](http://raphaeljs.com/graffle.html) - exemple de graphique interactif d'une bibliothèque générique de dessin vectoriel polyvalente. RaphaelJS ne peut pas mettre en page les nœuds automatiquement ; vous aurez besoin d'une autre bibliothèque pour cela.
  • JointJS Core - Bibliothèque de diagrammes open source sous licence MPL de David Durman. Elle peut être utilisée pour créer des diagrammes statiques ou des outils de création de diagrammes et d'applications entièrement interactifs. Fonctionne dans les navigateurs supportant SVG. Algorithmes de mise en page non inclus dans le paquetage de base
  • mxGraph](https://github.com/jgraph/mxgraph) Bibliothèque de diagramme HTML 5 précédemment commerciale, désormais disponible sous Apache v2.0. mxGraph est la bibliothèque de base utilisée dans [draw.io][2].

Bibliothèques commerciales

Bharath
Réponse modifiée 20 novembre 2018 в 6:45
Commentaires (13)

JsVIS était plutôt sympa, mais lent avec des graphes plus grands, et a été abandonné depuis 2007.

prefuse est un ensemble d'outils logiciels permettant de créer de riches visualisations interactives de données en Java. flare est une bibliothèque ActionScript permettant de créer des visualisations qui s'exécutent dans Adobe Flash Player, abandonnée depuis 2012.

Dan Dascalescu
Réponse modifiée 13 novembre 2014 в 9:47
Commentaires (4)

Comme l'a mentionné guruz, le [JIT][1] propose plusieurs belles mises en page de graphes/arbres, notamment des visualisations RGraph et HyperTree très attrayantes.

De plus, je viens de mettre en place une implémentation super simple basée sur SVG sur github (pas de dépendances, ~125 LOC) qui devrait fonctionner suffisamment bien pour les petits graphiques affichés dans les navigateurs modernes.

[1] : http://philogb.github.io/jit/

YakovL
Réponse modifiée 5 mai 2017 в 12:07
Commentaires (0)