523 votes

Code de visualisation graphique en JavaScript?

J'ai une structure de données qui représente un graphe orienté, et je veux le rendre dynamique sur une page HTML. Personne ne sait de tout code JavaScript peut faire un travail raisonnable, avec une présentation graphique? Ces graphiques seront généralement juste un peu de nœuds, peut-être dix à la fin supérieure, si ma conjecture est que la performance n'est pas une grosse affaire. Idéalement, je voudrais être en mesure de le raccorder avec jQuery afin que les utilisateurs peuvent ajuster la mise en page manuellement en faisant glisser les nœuds autour.


Edit: Google est la Visualisation de l'API semble être plus "graphiques et des graphiques" que "des graphiques comme des nœuds". Je ne vois pas de nœud orienté visualisations déjà construit, de toute façon. Savez-vous qu'il en existe un?

924voto

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

C'est JavaScript avec graphe orienté layouting, SVG et vous pouvez même faire glisser les nœuds autour. Encore besoin de quelques ajustements, mais est totalement utilisable. Vous créer des nœuds et des arêtes facilement avec du code JavaScript comme ceci:

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

J'ai utilisé le mentionné précédemment Raphael JS (bibliothèque de la graffle exemple), plus un peu de code pour un basé sur la force graphique de l'algorithme de mise en page que j'ai trouvé sur le net (tout ce qui est open source, licence MIT). Si vous avez des remarques ou besoin d'une certaine fonction, je peut la mettre en œuvre, il suffit de demander!

Edit: Vous voudrez peut-être avoir un coup d'oeil à d'autres projets, aussi! Voici une liste des projets similaires (certains ont déjà été mentionnés ici):

Pure Bibliothèques Javascript

Non Bibliothèques Javascript

72voto

raben Points 1322

Jetez un oeil à D3.js. Est une petite bibliothèque JavaScript libre pour la manipulation de documents sur la base de données.

D3 permet de lier des données arbitraires à un Modèle d'Objet de Document (DOM), et d'appliquer ensuite piloté par les données des transformations du document. Comme un exemple trivial, vous pouvez utiliser D3 pour générer une base de tableau HTML à partir d'un tableau de nombres. Ou, utiliser les mêmes données pour créer une interactive SVG graphique à barres avec des transitions en douceur et de l'interaction.

48voto

maxkfranz Points 1398

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

Cytoscape.js est un HTML5 graphique de visualisation de la bibliothèque. L'API est sophistiqué et suit jQuery conventions, y compris

  • les sélecteurs d'interrogation et de filtrage (cy.elements("node[weight >= 50].someClass") fait bien comme vous vous en doutiez),
  • le chaînage (par exemple, cy.nodes().unselect().trigger("mycustomevent")),
  • jQuery-comme des fonctions pour la liaison à des événements,des
  • des éléments comme des collections (comme jQuery possède des collections de HTMLDomElements),
  • extensibilité (pouvez ajouter des mises en page personnalisées, de l'INTERFACE utilisateur, le noyau et l'fonctions de collecte, et ainsi de suite),
  • et de plus en plus.

Si vous êtes à la réflexion sur la construction d'une grave webapp avec des graphiques, vous devriez au moins envisager Cytoscape.js. Il est gratuit et open-source:

http://cytoscape.github.io/cytoscape.js/

35voto

Sam C Points 2735

JsVIS est plutôt sympa, mais un peu lent avec des graphes plus grands. Si le vôtre est petit, il devrait bien fonctionner. Mon préféré est prefuse qui a apparemment maintenant un frontal Flex maintenant appelé flare qui pourrait être contrôlé avec JavaScript.

28voto

guruz Points 1129

Peut-être essayer JavaScript Information Visualization Toolkit (JIT) ou canviz

Mais en fait, cela m'intéresse aussi. Est-ce que personne ne sait quelque chose de mieux?

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X