Gráfico de red con zoom en AngularJS

Me gustaría visualizar un gráfico de red en una aplicación AngularJS. Los nodos y los bordes se almacenan como un objeto JSON, y los nodos se agregarán y modificarán más adelante (por ejemplo, una vez cada 30 segundos). Quiero usar el enlace de datos angular para actualizar automáticamente el gráfico cuando cambia el objeto JSON. El gráfico tendrá 10-1000 nodos. Los nodos serán nodos de texto rectangulares que contienen aproximadamente una oración cada uno. Me gustaría que el gráfico pudiera hacer zoom y desplazarse.

Conozco las siguientes opciones hasta ahora:

¿Hay otras bibliotecas relevantes? ¿Cuál es la mejor biblioteca para usar en este proyecto y cómo puedo implementar un gráfico de red dinámico con zoom de este tipo dada la biblioteca?

(Publicado originalmente en StackOverflow ).

Respuestas (4)

Según una respuesta anterior que di en StackOverflow, agregaría a su lista lo siguiente:

  • VivaGraph es una herramienta gratuita y de código abierto para la visualización de gráficos, pero tiene una comunidad más pequeña en comparación con SigmaJS. Tiene la función de zoom. Sin embargo, no sé nada sobre la integración angular.

  • Keylines es una herramienta comercial de visualización de gráficos, con estilos, análisis y diseños avanzados, y proporciona demostraciones de copiar/pegar si está utilizando Neo4J o Titan. No es gratuito, pero es compatible incluso con navegadores más antiguos, IE7 en adelante... Tiene la función de "zoom" y hay un contenedor Angular simple (beta) .

Descargo de responsabilidad: soy parte del equipo de KeyLines .

yFiles for HTML , una biblioteca comercial de dibujo de gráficos para Javascript/HTML5 ofrece las características que está buscando:

Puede importar nodos y bordes de estructuras JSON y actualizar dinámicamente el gráfico más adelante. Esta función se muestra en estas demostraciones . La visualización admite zoom y panorámicas prácticamente infinitas. El zoom y la panorámica, así como otras interacciones gráficas (edición), se pueden realizar mediante el mouse, el lápiz, el teclado y la entrada táctil. Ejemplos más avanzados están disponibles aquí . Dado que agregar nodos y bordes requiere ubicaciones inteligentes de los nuevos elementos de forma dinámica, yFiles proporciona las implementaciones de diseño automático más avanzadas disponibles para JavaScript y TypeScript hasta la fecha.

Hay algunas demostraciones de AngularJS y Angular2+ que muestran cómo posiblemente integrar la biblioteca con AngularJS y Angular(2+). Las demostraciones muestran todas las funciones de integración posibles:

  • Puede hacer que el control en sí se implemente como una directiva angular
  • Puede usar Angular para diseñar y vincular datos a los fragmentos SVG para la visualización de los nodos y las etiquetas.
  • Puede usar las funciones de enlace de datos de Angular para impulsar la estructura del gráfico: agregar elementos a una lista los agregará automáticamente al gráfico y también puede usar el mecanismo de filtrado de angular para filtrar el gráfico, por ejemplo

Descargo de responsabilidad : trabajo para la empresa que crea esa biblioteca (es por eso que conozco esa demostración), pero en SE no represento a mi empleador.

Linkurious.js funciona bien con Angular y es gratuito para proyectos de código abierto. He creado una aplicación web compleja para la visualización de gráficos (unos pocos miles de nodos) con ellos.

Sin embargo, recomiendo encarecidamente NO utilizar el enlace de datos bidireccional de Angular para verificar los cambios en los objetos porque Angular tiene que codificar el objeto en cada ciclo de resumen de $ y es una operación costosa. Una arquitectura pub-sub tradicional evitaría la caída del rendimiento.

Descargo de responsabilidad: Trabajo en Linkurious SAS.

Estoy creando una guía para integrar Linkurious.js en Angular, consulta github.com/Linkurious/linkurious.js/wiki/…
¿Es "zoom y panorámica"? Como es el punto principal de la pregunta, se muestra un GIF animado que haría de esta una gran respuesta :-)

GoJS es una biblioteca de diagramas de JavaScript de propósito general

Hay un montón de interactividad integrada que facilita a los usuarios crear y modificar sus propios diagramas. Vea un ejemplo de diagrama de flujo aquí, o muchos otros tipos de diagramas aquí.

  • Integrado, los usuarios pueden arrastrar y soltar nodos desde paletas, dibujar nuevos enlaces, reorganizar/cambiar el tamaño de los nodos, remodelar enlaces.
  • Las plantillas para nodos, enlaces y grupos pueden ser arbitrariamente complejas e incluir formas/geometrías personalizadas
  • Compatibilidad con enlaces creados por el usuario con validación de enlace arbitraria
  • Con enlaces, enrutamiento de enlaces ortogonales y Bézier con las opciones "Evita nodos" y "Saltar por encima"
  • Enlace de datos con datos JSON
  • Funcionalidad intuitiva de arrastrar y soltar y copiar y pegar
  • Deshacer y rehacer extensibles ilimitados
  • Soporte de mouse y táctil con herramientas personalizables
  • Diseño automático de gráficos
  • Paletas y vistas generales

Descargo de responsabilidad: soy uno de los principales desarrolladores de GoJS

¿Qué tan bien juega con AngularJs? Esperaría actualizar el $scopeen mi controlador y hacer que la vista (diagrama) se actualice automáticamente. Si no es así, no es Angular. ¿Quizás hay un envoltorio?
¿Es "zoom y panorámica"? Como es el punto principal de la pregunta, se muestra un GIF animado que haría de esta una gran respuesta :-)