Pregunta Biblioteca de visualización de gráficos en JavaScript


Tengo una estructura de datos que representa un gráfico dirigido, y quiero renderizarlo dinámicamente en una página HTML. Estos gráficos generalmente serán solo unos pocos nodos, tal vez diez en el extremo superior, así que supongo que el rendimiento no será un gran problema. Idealmente, me gustaría poder conectarlo con jQuery para que los usuarios puedan modificar el diseño manualmente arrastrando los nodos.

Nota: No estoy buscando una biblioteca de gráficos.


526


origen


Respuestas:


Acabo de armar lo que puedes estar buscando: http://www.graphdracula.net

Es JavaScript con diseño de gráfico dirigido, SVG e incluso puede arrastrar los nodos. Todavía necesita algunos ajustes, pero es totalmente utilizable. Puede crear nodos y bordes fácilmente con un código JavaScript como este:

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

Utilicé la biblioteca de Raphael JS mencionada anteriormente (el ejemplo de graffle) más algún código para un algoritmo de diseño de gráficos basado en fuerza que encontré en la red (todo de código abierto, licencia de MIT). Si tiene alguna observación o necesita una determinada función, puedo implementarla, ¡solo pregunte!


¡También querrás echarle un vistazo a otros proyectos! A continuación hay dos metacomparaciones:

  • SocialCompare tiene una extensa lista de bibliotecas, y la línea "Gráfico de nodo / borde" filtrará para las de visualización de gráficos.

  • DataVisualization.ch ha evaluado muchas bibliotecas, incluidas las de nodo / gráfico. Lamentablemente, no hay un enlace directo, por lo que tendrá que filtrar por "gráfico":Selection DataVisualization.ch

Aquí hay una lista de proyectos similares (algunos ya han sido mencionados aquí):

Bibliotecas de JavaScript puro

  • vis.js admite muchos tipos de gráficos de red / borde, más cronogramas y gráficos 2D / 3D. Diseño automático, agrupamiento automático, motor elástico de la física, móvil, navegación por teclado, diseño jerárquico, animación, etc. Licencia MIT y desarrollado por una firma holandesa especializada en investigación sobre redes autoorganizadas.

  • Cytoscape.js - Análisis gráfico interactivo y visualización con soporte móvil, siguiendo las convenciones jQuery. Financiado a través de subvenciones NIH y desarrollado por @maxkfranz (ver su respuesta a continuación) con la ayuda de varias universidades y otras organizaciones.

  • El kit de herramientas de JavaScript InfoVis - Jit, un marco de diseño y dibujo gráfico interactivo y multiusos. Ver por ejemplo el Árbol hiperbólico. Construido por el arquitecto de dataviz de Twitter Nicolas Garcia Belmonte y comprado por Sencha en 2010.

  • D3.js Potente biblioteca de visualización JS multiuso, el sucesor de Protovis. Ver el gráfico dirigido por la fuerza ejemplo, y otros ejemplos de gráficos en el galería.

  • Plotly's La biblioteca de visualización JS usa D3.js con enlaces JS, Python, R y MATLAB. Vea un ejemplo de nexworkx en IPython aquí, ejemplo de interacción humana aquíy API JS Embed.

  • sigma.js Ligera pero poderosa biblioteca para dibujar gráficos

  • jsPlumb Complemento jQuery para crear gráficos conectados interactivos

  • Elástico - un algoritmo de diseño gráfico orientado a la fuerza

  • Processing.js Puerto de Javascript de la biblioteca de procesamiento de John Resig

  • JS lo grafica - arrastrar y soltar cuadros conectados por líneas rectas. Diseño automático mínimo de las líneas.

  • Graffle de RaphaelJS - Ejemplo de gráfico interactivo de una biblioteca genérica de dibujo vectorial multipropósito. RaphaelJS no puede diseñar nodos automáticamente; necesitarás otra biblioteca para eso.

  • JointJS Core - Biblioteca de diagramas de código abierto con licencia MPL de David Durman. Se puede usar para crear diagramas estáticos o herramientas de diagramación totalmente interactivas y creadores de aplicaciones. Funciona en navegadores compatibles con SVG. Algoritmos de diseño no incluidos en el paquete principal

  • mxGraph Biblioteca de diagramación de HTML 5 previamente comercial, ahora disponible en Apache v2.0. mxGraph es la biblioteca base utilizada en draw.io.

Bibliotecas comerciales

  • GoJS Biblioteca interactiva de dibujo y diseño de gráficos

  • y Archivos para HTML Biblioteca de dibujo y disposición de gráficos comerciales

  • KeyLines Kit de herramientas de visualización de red comercial JS

  • ZoomCharts Biblioteca de visualización comercial multiusos

Bibliotecas abandonadas

  • Cytoscape Web Visor de red JS incrustable (no hay nuevas características planificadas; lo logró Cytoscape.js)

  • Canviz JS renderizador para gráficos Graphviz. Abandonado en septiembre de 2013.

  • arbor.js Gráficos sofisticados con buena física y ojos dulces. Abandonado en mayo de 2012. Varios semi-mantenido hay tenedores

  • jssvggraph "El algoritmo de diseño de gráfico dirigido a la fuerza más simple posible implementado como una biblioteca Javascript que utiliza objetos SVG". Abandonado en 2012.

  • jsdot Aplicación de dibujo del gráfico del lado del cliente. Abandonado en 2011.

  • Protovis Juego de herramientas gráficas para visualización (JavaScript). Reemplazado por d3.

  • Rueda de Moo Representación interactiva de JS para conexiones y relaciones (2008)

  • JSViz Guión de visualización de gráficos de la era 2007

  • dagre Diseño de gráficos para JavaScript

Bibliotecas que no son Javascript


834



Descargo de responsabilidad: soy un desarrollador de Cytoscape.js

Cytoscape.js es una biblioteca de visualización de gráficos HTML5. La API es sofisticada y sigue las convenciones jQuery, incluyendo

  • selectores para consultar y filtrar (cy.elements("node[weight >= 50].someClass") hace mucho como cabría esperar),
  • encadenamiento (p. cy.nodes().unselect().trigger("mycustomevent")),
  • funciones jQuery-like para enlazar a eventos,
  • elementos como colecciones (como jQuery tiene colecciones de HTMLDomElements),
  • extensibilidad (puede agregar diseños personalizados, interfaz de usuario, funciones básicas y de recopilación, etc.),
  • y más.

Si estás pensando en crear una aplicación web seria con gráficos, al menos deberías considerar Cytoscape.js. Es gratis y de código abierto:

http://js.cytoscape.org


40



JsVIS fue bastante agradable, pero lento con gráficos más grandes, y ha sido abandonado desde 2007.

prefuse es un conjunto de herramientas de software para crear visualizaciones ricas de datos interactivos en Java. llamarada  es una biblioteca de ActionScript para crear visualizaciones que se ejecutan en Adobe Flash Player, abandonadas desde 2012.


35



Como Guruz mencionó, el JIT tiene varios encantadores diseños de gráficos / árboles, incluyendo atractivas visualizaciones RGraph e HyperTree.

Además, acabo de poner un SVG muy simple basado en implementación en github (sin dependencias, ~ 125 LOC) que debería funcionar lo suficientemente bien para pequeños gráficos que se muestran en los navegadores modernos.


7



En un escenario comercial, un concursante serio es seguro y Archivos para HTML:

Ofrece:

  • Fácil importar de datos personalizados (esta demostración interactiva en línea parece hacer más o menos lo que el OP estaba buscando)
  • Edición interactiva para crear y manipular los diagramas a través de gestos de usuario (ver el completo editor)
  • Un gran API de programación para personalizar todos y cada uno de los aspectos de la biblioteca
  • Apoyo para agrupamiento y anidando (tanto interactivos como a través de los algoritmos de diseño)
  • No depende de un kit de herramientas de IU específico, sino que es compatible integración en casi cualquier juego de herramientas existente de Javascript (ver demos de "integración")
  • Diseño automático (varios estilos, como "jerárquico", "orgánico", "ortogonal", "árbol", "circular", "radial", y más)
  • Enrutamiento de borde sofisticado automático (enrutamiento de borde ortogonal y orgánico con evitación de obstáculos)
  • Diseño incremental y parcial (agregando y eliminando elementos y solo ligeramente o nada cambiando el resto del diagrama)
  • Soporte para agrupar y anidar (tanto interactivo como a través de los algoritmos de diseño)
  • Implementaciones de algoritmos de análisis de gráficos (rutas, centralidades, flujos de red, etc.)
  • Utiliza tecnologías HTML 5 como SVG + CSS y Canvas y propiedades de aprovechamiento de JavaScript modernas y otras características más de ES5 y ES6 (pero por la misma razón no se ejecutarán en IE versiones 8 y anteriores).
  • Utiliza una API modular que se puede cargar bajo demanda usando cargadores UMD

Aquí hay una representación de muestra que muestra la mayoría de las características solicitadas:

Screenshot of a sample rendering created by the BPMN demo.

Divulgación completa: trabajo para yWorks, pero en Stackoverflow no represento a mi empleador.


7