Biblioteca de visualización gráfica en JavaScript

523

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á 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.

Chris Farmer
fuente

Respuestas:

923

Acabo de reunir lo que puede 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");

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


¡Quizás quieras echar un vistazo a otros proyectos también! A continuación hay dos meta-comparaciones:

  • SocialCompare tiene una extensa lista 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 nodo / gráfico. Desafortunadamente 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 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 por teclado, diseño jerárquico, animación, etc. Licencia autorizada y desarrollada por MIT por una empresa 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 de 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 JavaScript InfoVis - Jit, un marco de diseño y diseño de gráficos interactivo y multipropósito. Ver por ejemplo el árbol hiperbólico . Construido por el arquitecto de datos de Twitter Nicolas García Belmonte y comprado por Sencha en 2010.

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

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

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

  • jsPlumb jQuery plug-in para crear gráficos conectados interactivos

  • Springy : un algoritmo de diseño gráfico dirigido por la fuerza

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

  • JS Graph It : cajas de arrastrar y soltar conectadas por líneas rectas. Mínimo diseño automático de las líneas.

  • RaphaelJS's Graffle : ejemplo 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 diagramas HTML 5 anteriormente comercial, ahora disponible en Apache v2.0. mxGraph es la biblioteca de base utilizada en draw.io .

Bibliotecas comerciales

Bibliotecas abandonadas

  • Cytoscape Web Embeddable JS Network viewer (no hay nuevas características planificadas; Cytoscape.js lo sucedió)

  • Canviz JS procesador de 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. Existen varias horquillas semi mantenidas .

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

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

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

  • Representación JS de Moo Wheel Interactive para conexiones y relaciones (2008)

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

  • Diseño gráfico de dagre para JavaScript

Bibliotecas no Javascript

Dan Dascalescu
fuente
44
Sí, ¡los bordes dirigidos son posibles! Use g.addEdge ("cereza", "manzana", {"dirigido": verdadero});
Johann Philipp Strathausen
necesita agregar también la biblioteca chart.js y chartnew.js. y esto ( charts.livegap.com ) se genera para ello
Omar Sedki
1
Hay dos bibliotecas más notables que se pueden agregar a la lista, a saber, Linkuroius.js y VivaGraphJS .
Łukasz K
2
¿Existe alguna alternativa de código abierto para el algoritmo de diseño yFILES? Tales como yworks.com/products/yfiles-layout-algorithms-for-cytoscape
Ryan Chou
1
He creado una biblioteca gratuita y liviana que puede ser útil para otros: github.com/n-yousefi/Arg-Graph
Naser Yousefi
48

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, que incluyen

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

Si está pensando en construir 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

maxkfranz
fuente
66
Todas las API están completamente documentadas. Los documentos incluso lo guían para comenzar (es decir, init). Hay también ejemplos de funcionamiento para las API individuales, y hay demostraciones en vivo. La funcionalidad está muy por encima de cualquier lib JS graph y los documentos son más extensos que la mayoría de los proyectos, ya sean comerciales o de código abierto. ¿Qué es exactamente lo que te falta en los documentos?
maxkfranz
3
Ok, lo siento, mi mal. No me veía bien. Sí, está bien documentado.
Tormenta
¿Tiene una forma de diseñar gráficos en un orden jerárquico (un diseño que se parece a un árbol pero de hecho es un gráfico, lo que significa que hay nodos con varios padres)
Mina
Tanto el dagre como el diseño de ancho funcionan para ese caso
maxkfranz
Necesito editar el gráfico con arrastrar y soltar las flechas que comienzan con los extremos y los extremos. Esta biblioteca dice que esas cosas son inmutables. Entonces necesito buscar otra biblioteca ...
Eugene Gr. Philippov
35

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 ricas visualizaciones interactivas de datos en Java. flare es una biblioteca de ActionScript para crear visualizaciones que se ejecutan en Adobe Flash Player, abandonadas desde 2012.

Sam C
fuente
2
Estas bibliotecas parecen un poco viejas en este momento, ¿qué están usando las personas hoy en día? Estoy buscando específicamente trazar series xy independientes.
blong
22
-1 - prefuse es Java, no JavaScript. Flare es Flash, tampoco JavaScript. JsVIS tiene errores y está desactualizado.
anatoly techtonik
2
@animuson: otro fuera de tema: OP estaba pidiendo bibliotecas de JavaScript. La única parte sobre JS en la respuesta es una biblioteca que no se ha desarrollado desde 2007.
Dan Dascalescu
10

En un escenario comercial, un concursante serio es yFiles for HTML :

Ofrece:

  • Importación fácil de datos personalizados ( esta demostración interactiva en línea parece hacer exactamente lo que buscaba el OP)
  • Edición interactiva para crear y manipular los diagramas a través de los gestos del usuario (ver el artículo completo editor )
  • Un gran API de programación para personalizar todos y cada uno de los aspectos de la biblioteca.
  • Soporte para agrupamiento y anidamiento (tanto interactivo como a través de los algoritmos de diseño)
  • No depende de un kit de herramientas de interfaz de usuario específico, pero admite la integración en casi cualquier kit de herramientas Javascript existente (consulte el demostraciones de "integración" )
  • Diseño automático (varios estilos, como "jerárquico", "orgánico", "ortogonal", "árbol", "circular", "radial" y más)
  • Enrutamiento automático de bordes sofisticado (enrutamiento de bordes orgánico y ortogonal con evitación de obstáculos)
  • Diseño incremental y parcial (agregando y eliminando elementos y cambiando ligeramente o nada cambiando el resto del diagrama)
  • Soporte para agrupamiento y anidamiento (tanto interactivo como a través de los algoritmos de diseño)
  • Implementaciones de algoritmos de análisis gráfico (rutas, centralidades, flujos de red, etc.)
  • Utiliza tecnologías HTML 5 como SVG + CSS y Canvas y propiedades modernas de apalancamiento de Javascript y otras características más de ES5 y ES6 (pero por la misma razón no se ejecutará en las versiones IE 8 y anteriores).
  • Utiliza una API modular que se puede cargar a pedido utilizando cargadores UMD

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

Captura de pantalla de una representación de muestra creada por la demostración BPMN.

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

Sebastian
fuente
3
La mejor colección de algoritmos, pero también la más cerrada, por lo que es imposible de usar en proyectos de código abierto :-(
forresto
1
La "mejor colección" probablemente sea cierta, pero "la más cerrada" es relativa, e "imposible" es incorrecto: es una licencia comercial, por lo que, a menos que el proyecto de código abierto use una licencia viral , puede usarse en proyectos de código abierto. Por supuesto, usar proyectos de código abierto en otros proyectos de código abierto es menos problemático ...
Sebastian
1
Parece que no entiendes cómo funciona el código abierto. ¿Está diciendo que su empresa puede otorgar a un proyecto de código abierto el derecho de usar este software para desarrolladores infinitos, el derecho de distribuirlo a desarrolladores y contribuyentes y evaluadores infinitos, por un costo fijo y único? Por supuesto que no .
Félix Saparelli
2
@ FélixSaparelli: Créeme: lo hago. Lo que describe es posible y se han hecho cosas similares antes. Se está vinculando a los términos de licencia estándar, pero, por supuesto, los acuerdos personalizados son posibles y se han hecho antes. Sin embargo, este no es el lugar adecuado para discutir esto. No dude en ponerse en contacto directamente con yWorks.
Sebastian
7

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

Además, acabo de poner una implementación súper simple basada en SVG 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.

Jack Rusher
fuente