Bibliothèque de visualisation graphique en JavaScript

Question

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

Note:Je ne recherche pas une bibliothèque de graphiques.

Answer 1

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

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

---

Vous voudrez peut-être aussi jeter un œil à d’autres projets !Vous trouverez ci-dessous deux méta-comparaisons :

• Comparaison sociale a une longue liste de bibliothèques, et la ligne "Node / Edge graph" filtrera celles de visualisation graphique.

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

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 de réseau/bord, ainsi que des chronologies et des graphiques 2D/3D.Mise en page automatique, clustering automatique, moteur physique élastique, convivialité mobile, navigation au clavier, disposition hiérarchique, animation, etc. Licence MIT 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 de graphiques interactifs avec support mobile, suivant les conventions jQuery.Financé via des subventions du NIH et développé par par @maxkfranz (voir sa réponse ci-dessous) avec l'aide de plusieurs universités et autres organismes.

• La boîte à outils JavaScript InfoVis - Jit, un cadre interactif et polyvalent de dessin et de mise en page de graphiques.Voir par exemple le Arbre hyperbolique.Construit par l'architecte de dataviz Twitter Nicolas García Belmonte et acheté par Sencha en 2010.

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

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

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

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

• Élastique - un algorithme de mise en page de graphe dirigé par la force

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

• Graphique JS - des boîtes glisser-déposer reliées par des lignes droites.Disposition automatique minimale des lignes.

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

• Noyau JointJS - Bibliothèque de diagrammes open source sous licence MPL de David Durman.Il peut être utilisé pour créer soit des diagrammes statiques, soit des outils de création de diagrammes et des générateurs d'applications entièrement interactifs.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 auparavant commerciale, désormais disponible sous Apache v2.0.mxGraph est la bibliothèque de base utilisée dans dessiner.io.

Bibliothèques commerciales

• GoJS Bibliothèque interactive de dessins et de mises en page de graphiques

• yFichiers pour HTML Bibliothèque de dessins et de mises en page de graphiques commerciaux

• Lignes clés Boîte à outils de visualisation de réseau JS commercial

• Graphiques Zoom Bibliothèque de visualisation polyvalente commerciale

• Diagramme JavaScript de synchronisation Bibliothèque de diagrammes commerciaux pour le dessin et la visualisation.

Bibliothèques abandonnées

• Web Cytoscape Visionneuse de réseau JS intégrable (aucune nouvelle fonctionnalité prévue ;succédé par Cytoscape.js)

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

• arbor.js Des graphismes sophistiqués avec une belle physique et un régal pour les yeux.Abandonné en mai 2012.Plusieurs semi-entretenu les fourchettes existent.

• jssvggraph "L'algorithme de mise en page graphique dirigé par force le plus simple possible implémenté en tant que 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 Moo Représentation JS interactive pour les connexions et les relations (2008)

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

• jour Disposition graphique pour JavaScript

Bibliothèques non Javascript

• Visualisation graphique Langage de visualisation graphique sophistiqué

  • Graphviz a été compilé en Javascript en utilisant Emscripten ici avec un démo interactive en ligne ici

• Éclater Dessin graphique magnifique et puissant basé sur Flash

• NoeudBox Visualisation de graphiques Python

Answer 2

Clause de non-responsabilité:Je suis 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),
• enchaînement (par ex. cy.nodes().unselect().trigger("mycustomevent")),
• Fonctions de type jQuery pour la liaison aux événements,
• des éléments en tant que collections (comme jQuery a des collections de HTMLDomElements),
• extensibilité (peut ajouter des mises en page personnalisées, une interface utilisateur, des fonctions de base et de collection, etc.),
• et plus.

Si vous envisagez de créer une application Web sérieuse avec des graphiques, vous devriez au moins considérer Cytoscape.js.C'est gratuit et open source :

http://js.cytoscape.org

Answer 3

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

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

Answer 4

Dans un scénario commercial, un concurrent sérieux est certainement yFichiers 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)
• Édition interactive pour créer et manipuler les diagrammes grâce aux gestes de l'utilisateur (voir la version complète éditeur)
• Un énorme API de programmation pour personnaliser chaque aspect de la bibliothèque
• Soutien regroupement et nidification (à la fois interactif et via les algorithmes de mise en page)
• 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 le démos "intégration")
• Disposition automatique (différents styles, comme "hiérarchique", "organique", "orthogonal", "arbre", "circulaire", "radial" et plus encore)
• Routage automatique sophistiqué des bords (routage orthogonal et organique des bords avec évitement d'obstacles)
• Disposition incrémentielle et partielle (ajout et suppression d'éléments et modification légère ou pas du tout du reste du diagramme)
• Prise en charge du regroupement et de l'imbrication (à la fois interactifs et via les algorithmes de mise en page)
• Implémentations de algorithmes d'analyse de graphiques (chemins, centralités, flux du réseau, etc.)
• Utilise les technologies HTML 5 telles que SVG+CSS et Canvas et Javascript moderne exploitant les propriétés et d'autres fonctionnalités ES5 et ES6 (mais pour la même raison, ne fonctionnera pas dans les versions 8 et inférieures d'IE).
• 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 :

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

Answer 5

Comme l'a mentionné le gourou, le JIT a plusieurs belles présentations de graphiques/arbres, y compris des visualisations RGraph et HyperTree très attrayantes.

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