Question Bibliothèque de visualisation graphique en JavaScript


J'ai une structure de données qui représente un graphe orienté, 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 la performance ne va pas être un gros problème. Idéalement, j'aimerais pouvoir utiliser jQuery pour que les utilisateurs puissent modifier la mise en page manuellement en faisant glisser les nœuds.

Note: Je ne cherche pas de bibliothèque de graphiques.


526


origine


Réponses:


Je viens de mettre en place ce que vous cherchez: http://www.graphdracula.net

C'est JavaScript avec la mise en page de graphes orientés, SVG et vous pouvez même faire glisser les nœuds. Encore besoin de quelques ajustements, mais est totalement utilisable. Vous créez facilement des nœuds et des arêtes 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 graffle) plus du code pour un algorithme de disposition de graphes basé sur la force que j'ai trouvé sur le net (tout 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 pouvez aussi regarder d'autres projets! Voici deux méta-comparaisons:

  • SocialCompare a une liste étendue de bibliothèques, et la ligne "Node / edge graph" va filtrer pour les visualisations de graphes.

  • DataVisualization.ch a évalué de nombreuses bibliothèques, y compris celles de type nœud / graphique. Malheureusement, il n'y a pas de lien direct, donc vous devrez filtrer pour "graphique":Selection 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. Auto-mise en page, auto-clustering, moteur de physique élastique, adapté aux mobiles, navigation au clavier, disposition hiérarchique, animation, etc. MIT sous licence 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 graphique interactive et visualisation avec support mobile, suivant les conventions de jQuery. Financé par des subventions NIH et développé par par @maxkfranz (voir sa réponse ci-dessous) avec l'aide de plusieurs universités et d'autres organisations.

  • La boîte à outils JavaScript InfoVis - Jit, un schéma graphique interactif et multi-usages. Voir par exemple le Arbre hyperbolique. Construit par Twitter dataviz architecte Nicolas Garcia Belmonte et acheté par Sencha en 2010.

  • D3.js Bibliothèque de visualisation JS multi-fonctions puissante, le successeur de Protovis. Voir le graphique dirigé par la force exemple, et d'autres exemples de graphiques dans le Galerie.

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

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

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

  • Élastique - un algorithme de disposition de graphes forcés

  • Processing.js Port Javascript de la librairie Processing de John Resig

  • JS Graph It - glisser des boîtes connectées par des lignes droites. Auto-mise en page minimale des lignes.

  • Graffle de RaphaelJS - Exemple de graphique interactif d'une bibliothèque générique de dessin vectoriel multi-usage. RaphaelJS ne peut pas mettre en forme 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. 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 principal

  • mxGraph Bibliothèque de diagrammes HTML 5 précédemment commercialisée, maintenant disponible sous Apache v2.0. mxGraph est la bibliothèque de base utilisée dans draw.io.

Bibliothèques commerciales

  • GoJS Dessin graphique interactif et bibliothèque de mise en page

  • yFiles pour HTML Dessin graphique commercial et bibliothèque de mise en page

  • KeyLines Trousse d'outils de visualisation de réseau commercial JS

  • ZoomCharts Bibliothèque de visualisation commerciale polyvalente

Bibliothèques abandonnées

  • Cytoscape Web Visionneuse JS Network embarquable (pas de nouvelles fonctionnalités planifiées, succédées par Cytoscape.js)

  • Canviz JS moteur de rendu pour les graphiques Graphviz. Abandonné en septembre 2013.

  • arbor.js Graphiques sophistiqués avec une physique agréable et des bonbons pour les yeux. Abandonné en mai 2012. Plusieurs semi-maintenu les fourchettes existent.

  • jssvggraph "L'algorithme de disposition de graphes orienté force la plus simple possible implémenté comme une bibliothèque Javascript qui utilise des objets SVG". Abandonné en 2012.

  • jsdot Application de dessin graphique côté client. Abandonné en 2011.

  • Protovis Boîte à outils graphique pour la visualisation (JavaScript). Remplacé par d3.

  • Roue de Moo Représentation JS interactive pour les connexions et les relations (2008)

  • JSViz Script de visualisation de graphique de l'ère 2007

  • dagre Mise en page graphique pour JavaScript

Bibliothèques non-Javascript


834



Disclaimer: Je suis un développeur de Cytoscape.js

Cytoscape.js est une bibliothèque de visualisation de graphes HTML5. L’API est sophistiquée et suit les conventions jQuery, y compris

  • sélecteurs pour interroger et filtrer (cy.elements("node[weight >= 50].someClass") fait beaucoup comme vous vous en doutez),
  • chaînage (par ex. cy.nodes().unselect().trigger("mycustomevent")),
  • fonctions jQuery-like pour la liaison aux événements,
  • des éléments en tant que collections (comme jQuery a des collections de HTMLDomElements),
  • extensibilité (peut ajouter des dispositions personnalisées, l'interface utilisateur, les fonctions de base et de collecte, etc.),
  • et plus.

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

http://js.cytoscape.org


40



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

préfuser est un ensemble d'outils logiciels permettant de créer des visualisations de données interactives riches en Java. éclater  est une bibliothèque ActionScript permettant de créer des visualisations exécutées dans Adobe Flash Player, abandonnées depuis 2012.


35



Comme guruz mentionné, le JIT a plusieurs jolies dispositions graphiques / arborescentes, y compris des visualisations RGraph et HyperTree très attrayantes.

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


7



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

CA offre:

  • Facile importer de données personnalisées (cette démo interactive en ligne semble faire à peu près exactement ce que le PO recherchait)
  • Edition interactive pour créer et manipuler les diagrammes à l'aide de gestes utilisateur (voir le éditeur)
  • Un énorme API de programmation pour personnaliser chaque aspect de la bibliothèque
  • Soutien regroupement et nidification (à la fois interactif, ainsi que par le biais des algorithmes de mise en page)
  • Ne dépend pas d'une boîte à outils spécifique à l'interface utilisateur, mais prend en charge l'intégration dans presque toutes les boîtes à outils Javascript existantes (voir le démos "intégration")
  • Mise en page automatique (styles variés, tels que "hiérarchique", "organique", "orthogonal", "arborescence", "circulaire", "radial", etc.)
  • Routage de bord sophistiqué et 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 pas du reste du diagramme)
  • Prise en charge du regroupement et de l'imbrication (à la fois interactive et via les algorithmes de mise en page)
  • Implémentations de algorithmes d'analyse graphique (chemins, centralités, flux de réseau, etc.)
  • Utilise les technologies HTML 5 comme SVG + CSS et Canvas et les propriétés modernes de mise en valeur de Javascript 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:

Screenshot of a sample rendering created by the BPMN demo.

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


7