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:
Es fácil hacer que la actualización dinámica funcione con Angular (usando ParticleSystem.merge
). Sin embargo, Arbor no parece admitir el comportamiento ampliable y no parece tener un buen soporte. Por ejemplo, el error de un solo nodo aún no se ha resuelto.
Hay una demostración de diseño de fuerza con zoom , y varios lugares tienen información sobre el uso de d3 con Angular. D3 está bien soportado, pero parece de un nivel más bajo que las opciones a continuación. Por ejemplo, la creación de un gráfico de red con etiquetas de nodos rectangulares atractivas no parece trivial.
VisJS admite gráficos de red ampliables, y hay una biblioteca Angular en progreso , pero no sé qué tan confiables son VisJS y su biblioteca Angular.
SigmaJS también admite gráficos de red ampliables, pero no sé si funciona bien con Angular.
¿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 ).
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:
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.
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í.
Descargo de responsabilidad: soy uno de los principales desarrolladores de GoJS
$scope
en mi controlador y hacer que la vista (diagrama) se actualice automáticamente. Si no es así, no es Angular. ¿Quizás hay un envoltorio?
Seb
Nicolás Raúl