Biblioteca de visualización de gráficos en JavaScript

StackOverflow https://stackoverflow.com/questions/7034

Pregunta

Tengo una estructura de datos que representa un gráfico dirigido y quiero representarlo dinámicamente en una página HTML.Estos gráficos generalmente serán solo unos pocos nodos, tal vez diez en el extremo superior, por lo que supongo que el rendimiento no será gran cosa.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.

¿Fue útil?

Solución

Acabo de reunir lo que quizás estés buscando: http://www.graphdracula.net

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

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

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

¡Es posible que también quieras echar un vistazo a otros proyectos!A continuación se muestran dos metacomparaciones:

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

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

Aquí hay una lista de proyectos similares (algunos ya se han mencionado aquí):

Bibliotecas de JavaScript puro

  • vis.js admite muchos tipos de gráficos de red/borde, además de líneas de tiempo y gráficos 2D/3D.Diseño automático, agrupamiento automático, motor de física elástico, compatible con dispositivos móviles, navegación con teclado, diseño jerárquico, animación, etc. licencia MIT y desarrollado por una empresa holandesa especializada en investigación sobre redes autoorganizadas.

  • Citoscape.js - Análisis y visualización de gráficos interactivos con soporte móvil, siguiendo las convenciones de jQuery.Financiado a través de subvenciones del 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 de gráficos interactivo y multipropósito.Véase por ejemplo el Árbol hiperbólico.Construido por el arquitecto de visualización de datos de Twitter Nicolás García Belmonte y comprado por Sencha en 2010.

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

  • trama La biblioteca de visualización JS utiliza 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 de inserción JS.

  • sigma.js Biblioteca ligera pero potente para dibujar gráficos.

  • jsPlumb Complemento jQuery para crear gráficos conectados interactivos

  • Elástico - un algoritmo de diseño de gráficos dirigido por la fuerza

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

  • JS graficarlo - Cuadros de arrastrar y soltar 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.

  • Núcleo de JointJS - Biblioteca de diagramación de código abierto con licencia MPL de David Durman.Se puede utilizar para crear diagramas estáticos o herramientas de diagramación y creadores de aplicaciones totalmente interactivos.Funciona en navegadores que admiten SVG.Algoritmos de diseño no incluidos en el paquete principal

  • mxGráfico Biblioteca de diagramación HTML 5, anteriormente comercial, ahora disponible bajo Apache v2.0.mxGraph es la biblioteca base utilizada en dibujar.io.

Bibliotecas comerciales

Bibliotecas abandonadas

  • Web de citoscape Visor JS Network integrable (no se planean nuevas funciones;reemplazado por Cytoscape.js)

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

  • arbor.js Gráficos sofisticados con física agradable y atractivos para la vista.Abandonado en mayo de 2012.Varios semi-mantenido existen tenedores.

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

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

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

  • Rueda de muu Representación JS interactiva 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

Otros consejos

Descargo de responsabilidad:Soy desarrollador de Cytoscape.js

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

  • selectores para consultar y filtrar (cy.elements("node[weight >= 50].someClass") hace más de lo que cabría esperar),
  • encadenamiento (por ej. cy.nodes().unselect().trigger("mycustomevent")),
  • Funciones similares a jQuery para vincular eventos,
  • elementos como colecciones (como jQuery tiene colecciones de HTMLDomElements),
  • extensibilidad (puede agregar diseños personalizados, interfaz de usuario, funciones principales y de colección, etc.),
  • y más.

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

http://js.cytoscape.org

JsVIS era bastante bueno, pero lento con gráficos más grandes y ha estado abandonado desde 2007.

prefundir es un conjunto de herramientas de software para crear visualizaciones de datos interactivas enriquecidas en Java. llamarada es una biblioteca ActionScript para crear visualizaciones que se ejecutan en Adobe Flash Player, abandonada desde 2012.

En un escenario comercial, un concursante serio seguramente es yArchivos para HTML:

Ofrece:

  • Fácil importar de datos personalizados (esta demostración interactiva en línea parece hacer exactamente lo que el OP estaba buscando)
  • Edición interactiva para crear y manipular los diagramas mediante gestos del usuario (ver la guía completa). 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 interactivo como a través de algoritmos de diseño)
  • No depende de un conjunto de herramientas de interfaz de usuario específico, pero admite integración en casi cualquier kit de herramientas de Javascript existente (consulte la demostraciones de "integración")
  • Diseño automático (varios estilos, como "jerárquico", "orgánico", "ortogonal", "árbol", "circular", "radial" y más)
  • Enrutamiento de bordes sofisticado y automático (enrutamiento de bordes ortogonal y orgánico con evitación de obstáculos)
  • Diseño incremental y parcial (agregar y eliminar elementos y cambiar solo ligeramente o nada el resto del diagrama)
  • Soporte para agrupación y anidamiento (tanto interactivo como a través de algoritmos de diseño)
  • Implementaciones de algoritmos de análisis de gráficos (caminos, centralidades, flujos de red, etc.)
  • Utiliza tecnologías HTML 5 como SVG+CSS y Canvas y propiedades modernas de aprovechamiento de Javascript y otras características más de ES5 y ES6 (pero por la misma razón no se ejecutará en las versiones 8 e inferiores de IE).
  • Utiliza una API modular que se puede cargar bajo demanda utilizando 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.

La divulgación completa:Trabajo para yWorks, pero en Stackoverflow no represento a mi empleador.

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

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top