Bibliothèque de visualisation de graphiques en JavaScript


523

J'ai une structure de données qui représente un graphique dirigé, et je veux le rendre dynamiquement sur une page HTML. Ces graphiques ne seront généralement que quelques nœuds, peut-être dix à l'extrémité supérieure, donc je suppose que les performances ne seront pas un gros problème. Idéalement, j'aimerais pouvoir le connecter avec jQuery afin que les utilisateurs puissent modifier la mise en page manuellement en faisant glisser les nœuds.

Remarque: je ne recherche pas de bibliothèque de graphiques.


Réponses:


923

Je viens de rassembler ce que vous cherchez peut-être: http://www.graphdracula.net

C'est JavaScript avec une mise en page de graphique dirigée, SVG et vous pouvez même faire glisser les nœuds. A encore besoin de quelques ajustements, mais est totalement utilisable. Vous créez facilement des nœuds et des 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) plus du code pour un algorithme de mise en page basé sur la force que j'ai trouvé sur le net (tout open source, licence MIT). Si vous avez des remarques ou avez besoin d'une certaine fonctionnalité, je peux l'implémenter, il suffit de demander!


Vous voudrez peut-être aussi jeter un œil à d'autres projets! Voici deux méta-comparaisons:

  • SocialCompare a une longue liste de bibliothèques, et la ligne "Node / edge graph" filtrera pour les visualisations de graphiques.

  • DataVisualization.ch a évalué de nombreuses bibliothèques, y compris des nœuds / graphiques. Malheureusement, il n'y a pas de lien direct, vous devrez donc filtrer pour "graphique":Sélection DataVisualization.ch

Voici une liste de projets similaires (certains ont déjà été mentionnés ici):

Bibliothèques JavaScript pures

  • vis.js prend en charge de nombreux types de graphiques réseau / périphérie, ainsi que des chronologies et des graphiques 2D / 3D. Disposition automatique, mise en cluster automatique, moteur physique dynamique, convivial pour les mobiles, navigation par clavier, disposition hiérarchique, animation, etc. MIT sous licence et développé par une firme néerlandaise spécialisée dans la recherche sur les réseaux auto-organisés.

  • Cytoscape.js - analyse et visualisation graphique interactive avec support mobile, suivant les conventions jQuery. Financé via des subventions NIH et développé par @maxkfranz (voir sa réponse ci-dessous ) avec l'aide de plusieurs universités et autres organisations.

  • La boîte à outils JavaScript InfoVis - Jit, un cadre de dessin et de mise en page graphique interactif et polyvalent. Voir par exemple l' arbre hyperbolique . Construit par l'architecte Twitter Dataviz Nicolas Garcia Belmonte et acheté par Sencha en 2010.

  • D3.js Puissante bibliothèque de visualisation JS polyvalente, successeur de Protovis. Voir l' exemple de graphique dirigé par la force et d'autres exemples de graphique dans la galerie .

  • La bibliothèque de visualisation JS de Plotly utilise D3.js avec les liaisons JS, Python, R et MATLAB. Voir un exemple nexworkx dans IPython ici , un exemple d'interaction humaine ici et l' API JS Embed .

  • sigma.js Bibliothèque légère mais puissante pour dessiner des graphiques

  • Plug-in jsPlumb jQuery pour créer des graphiques connectés interactifs

  • Springy - un algorithme de mise en page de graphique dirigé par la force

  • Port Javascript Processing.js de la bibliothèque Processing par John Resig

  • JS Graph It - boîtes drag'n'drop reliées par des lignes droites. Disposition automatique minimale des lignes.

  • RaphaelJS's Graffle - exemple graphique interactif d'une bibliothèque générique de dessin vectoriel polyvalent. RaphaelJS ne peut pas disposer automatiquement les nœuds; vous aurez besoin d'une autre bibliothèque pour cela.

  • JointJS Core - Bibliothèque de diagrammes open source sous licence MPL de David Durman. Il peut être utilisé pour créer des diagrammes statiques ou des outils de création de diagrammes entièrement interactifs et des générateurs d'applications. Fonctionne dans les navigateurs prenant en charge SVG. Algorithmes de mise en page non inclus dans le package de base

  • mxGraph Bibliothèque de diagrammes 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 .

Bibliothèques commerciales

Bibliothèques abandonnées

Bibliothèques non Javascript


4
Oui, les bords dirigés sont possibles! Utilisez g.addEdge ("cerise", "pomme", {"dirigé": vrai});
Johann Philipp Strathausen

besoin d'ajouter également la bibliothèque chart.js & chartnew.js. et cela ( charts.livegap.com ) est généré pour cela
Omar Sedki

1
Il existe deux autres bibliothèques remarquables qui peuvent être ajoutées à la liste, à savoir Linkuroius.js et VivaGraphJS .
Łukasz K

2
Existe-t-il une alternative open source pour l'algorithme de mise en page yFILES? Tels que yworks.com/products/yfiles-layout-algorithms-for-cytoscape
Ryan Chou

1
J'ai créé une bibliothèque gratuite et légère qui peut être utile à d'autres: github.com/n-yousefi/Arg-Graph
Naser Yousefi

48

Avertissement: je suis un développeur de Cytoscape.js

Cytoscape.js est une bibliothèque de visualisation de graphiques HTML5. L'API est sophistiquée et suit les conventions jQuery, notamment

  • sélecteurs pour l'interrogation et le filtrage (cy.elements("node[weight >= 50].someClass") fait tout ce que vous attendez),
  • chaînage (par exemple cy.nodes().unselect().trigger("mycustomevent")),
  • Fonctions de type jQuery pour la liaison à des événements,
  • éléments en tant que collections (comme jQuery a des collections de HTMLDomElements),
  • extensibilité (peut ajouter des dispositions personnalisées, une interface utilisateur, des fonctions de base et de collecte, etc.),
  • et plus.

Si vous songez à créer une webapp sérieuse avec des graphiques, vous devriez au moins envisager Cytoscape.js. C'est gratuit et open-source:

http://js.cytoscape.org


6
Toutes les API sont entièrement documentées. Les documents vous aident même à démarrer (c'est-à-dire init). Il existe également des exemples en cours d'exécution pour les API individuelles et des démonstrations en direct. La fonctionnalité est bien au-dessus de toute bibliothèque de graphes JS et les documents sont plus étendus que la plupart des projets - qu'ils soient commerciaux ou open source. Qu'est-ce qui vous manque exactement dans la documentation?
maxkfranz

3
Ok, désolé ma mauvaise. Je n'ai pas bien regardé. Oui, c'est bien documenté.
Tempête du

A-t-il un moyen de disposer les graphiques dans un ordre hiérarchique (une disposition qui ressemble à un arbre mais c'est en fait un graphique, ce qui signifie qu'il y a des nœuds avec plusieurs parents)
Mina

Le dagre et la première mise en page fonctionnent pour ce cas
maxkfranz

J'ai besoin d'éditer le graphique avec un glisser-déposer des flèches début et fin. Cette bibliothèque dit que ces choses sont immuables. Je dois donc chercher une autre bibliothèque ...
Eugene Gr. Philippov

35

JsVIS était plutôt sympa, mais lent avec des graphiques 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 pour créer des visualisations qui s'exécutent dans Adobe Flash Player, abandonnée depuis 2012.


2
Ces bibliothèques semblent un peu anciennes à ce stade, qu'utilisent les gens aujourd'hui? J'examine spécifiquement le traçage de séries xy indépendantes.
blong

22
-1 - préfuse est Java, pas JavaScript. Flare est Flash, pas JavaScript non plus. JsVIS est bogué et obsolète.
anatoly techtonik

2
@animuson: un autre hors sujet: OP demandait des bibliothèques JavaScript. La seule partie sur JS dans la réponse est une bibliothèque qui n'a pas été développée depuis 2007.
Dan Dascalescu

10

Dans un scénario commercial, un concurrent sérieux est à coup sûr yFiles pour HTML :

CA offre:

  • Importation facile de données personnalisées ( cette démo en ligne interactive semble faire à peu près exactement ce que le PO recherchait)
  • Édition interactive pour créer et manipuler les diagrammes par des gestes utilisateur (voir l' éditeur complet )
  • Une énorme API de programmation pour personnaliser chaque aspect de la bibliothèque
  • Prise en charge du regroupement et de l' imbrication (à la fois interactifs et via les algorithmes de disposition)
  • Ne dépend pas d'une boîte à outils d'interface utilisateur spécifique mais prend en charge l' intégration dans presque toutes les boîtes à outils Javascript existantes (voir les démos "d'intégration" )
  • Disposition automatique (divers styles, comme "hiérarchique", "organique", "orthogonal", "arbre", "circulaire", "radial", etc.)
  • Routage de bord sophistiqué automatique (routage de bord orthogonal et organique avec évitement d'obstacles)
  • Disposition incrémentielle et partielle (ajout et suppression d'éléments et modification légère ou nulle du reste du diagramme)
  • Prise en charge du regroupement et de l'imbrication (à la fois interactifs et via les algorithmes de disposition)
  • Implémentations d' algorithmes d'analyse de graphes (chemins, centralités, flux réseau, etc.)
  • Utilise les technologies HTML 5 comme SVG + CSS et Canvas et les propriétés de levier Javascript modernes et d'autres fonctionnalités ES5 et ES6 (mais pour la même raison ne fonctionnera pas dans les versions IE 8 et inférieures).
  • Utilise une API modulaire qui peut être chargée à la demande à l'aide de chargeurs UMD

Voici un exemple de rendu qui montre la plupart des fonctionnalités demandées:

Capture d'écran d'un exemple de rendu créé par la démo BPMN.

Divulgation complète: je travaille pour yWorks, mais sur Stackoverflow je ne représente pas mon employeur.


3
La meilleure collection d'algorithmes, mais aussi la plus fermée, ce qui la rend impossible à utiliser dans des projets open-source :-(
forresto

1
"La meilleure collection" est probablement vraie, mais "la plus fermée" est relative, et "impossible" est incorrect: c'est une licence commerciale, donc à moins que le projet open-source n'utilise une licence virale , il peut être utilisé dans des projets open-source. Bien sûr, l'utilisation de projets open source dans d'autres projets open source est moins problématique ...
Sebastian

1
Vous semblez ne pas comprendre comment fonctionne l'open source. Voulez-vous dire que votre entreprise peut accorder à un projet open source le droit d'utiliser ce logiciel pour des développeurs infinis, le droit de le distribuer à des développeurs et contributeurs et testeurs infinis, pour un coût fixe et unique? Bien sûr que non .
Félix Saparelli

2
@ FélixSaparelli: Croyez-moi: oui. Ce que vous décrivez est possible et des choses similaires ont été faites auparavant. Vous établissez un lien vers les termes de la licence standard, mais bien entendu, des accords personnalisés sont possibles et ont déjà été conclus. Ce n'est cependant pas le bon endroit pour en discuter. N'hésitez pas à contacter directement yWorks.
Sebastian

7

Comme Guruz l'a mentionné, le JIT a plusieurs jolies dispositions de graphiques / arbres, y compris des visualisations RGraph et HyperTree très attrayantes.

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.