javascript - may - ng-app que es
Gráfico de red ampliable en AngularJS (4)
En un contexto comercial, también debe considerar yFiles para HTML como una biblioteca para llevar la visualización de gráficos de alta calidad a las aplicaciones potenciadas Angular (y AngularJS).
Es una aplicación de dibujo y edición de gráficos con todas las funciones que brinda soluciones para todas sus necesidades de gráficos y diagramas.
Específicamente, 1000 nodos no son un problema, al menos si esto no está en dispositivos móviles antiguos de gama baja, en cuyo caso solo las visualizaciones simples proporcionarán un buen rendimiento. Pero incluso entonces, con el motor de representación híbrido único que puede aprovechar todos los SVG, Canvas y WebGL al mismo tiempo en un diagrama, incluso eso debería funcionar.
Para mil nodos con cada línea de texto en ellos, en los dispositivos de gama baja será problemático mostrarlos todos en la pantalla al mismo tiempo, sin embargo, la virtualización también ayuda aquí.
Hay algunas demostraciones en línea y en vivo que muestran diferentes niveles de integración Angular (2+) y AngularJS, pero si realmente quieres jugar con la biblioteca en un nivel de programación, deberías descargarla y revisar las fuentes no minimizadas para aquellos población. Para el desarrollo de Angular2 +, se encuentra disponible un conjunto completo de enlaces de TypeScript y las muestras muestran cómo unir datos angulares a la visualización gráfica, así como cómo utilizar opcionalmente angular para la creación de plantillas de las visualizaciones SVG. Por supuesto que también incluyen el componente angular de visualización de gráficos de núcleo.
Divulgación: trabajo para la compañía que proporciona esa biblioteca, sin embargo, no represento a mi empleador en SO.
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 utilizar el enlace de datos angular para actualizar automáticamente el gráfico cuando cambia el objeto JSON. La gráfica tendrá 10-1000 nodos. Los nodos serán nodos de texto rectangular que contienen aproximadamente una oración cada uno. Me gustaría que el gráfico sea capaz de hacer zoom y paneo.
Sé de las siguientes opciones hasta ahora:
Es fácil hacer que la actualización dinámica funcione con Angular (utilizando
ParticleSystem.merge). Sin embargo, Arbor no parece admitir el comportamiento con zoom y no parece estar bien soportado. Por ejemplo, el error de un solo nodo sigue sin resolverse.Hay una demostración de diseño de fuerza ampliable , y varios lugares tienen información sobre el uso de d3 con Angular. D3 está bien soportado, pero parece de menor nivel que las opciones a continuación. Por ejemplo, la creación de un gráfico de red con etiquetas de nodos rectangulares de buen aspecto parece no trivial.
VisJS es compatible con gráficos de red ampliables, y hay una biblioteca Angular de trabajos en curso , pero no sé qué tan confiables son VisJS y su biblioteca Angular.
SigmaJS también es compatible con 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 un zoom de este tipo en la biblioteca?
Esto realmente debería estar en la Recomendación de software StackExchange, pero no puedo votar para cerrar debido a la recompensa.
GoJS compatible con todos sus requisitos y funciona junto con Angular ( demostración simple aquí ). (JSON para almacenamiento de modelos, enlace de datos, zoom y pan incorporado)
Hay una buena demostración / ejemplo de un mapa de red con código fuente en D3: http://christophergandrud.github.io/d3Network/ La funcionalidad está ahí, y D3 parece jugar bien con JSON. De mi investigación, esta es una opción fuerte para una biblioteca de visualización. Muchas otras bibliotecas (grafito, etc.) también admiten la misma funcionalidad pero son más difíciles de implementar y no son extremadamente activas.
NVD3 es una variación de D3 diseñada para AngularJS que también podría funcionar. Implementar gráficos y tablas desde NVD3 es más fácil en AngularJS que en D3.
He estado experimentando en VisJs en angular, y realmente me está gustando hasta ahora. Su red es tanto pannable como zoomable, y puede seleccionar nodos. La documentación ha sido fácil de seguir y hay muchos ejemplos en su sitio. Como las redes de vis se pueden actualizar dinámicamente, me resultó fácil integrarla en mi aplicación angular. Por ejemplo, he creado esta directiva:
app.directive(''visNetwork'', function() {
return {
restrict: ''E'',
require: ''^ngModel'',
scope: {
ngModel: ''='',
onSelect: ''&'',
options: ''=''
},
link: function($scope, $element, $attrs, ngModel) {
var network = new vis.Network($element[0], $scope.ngModel, $scope.options || {});
var onSelect = $scope.onSelect() || function(prop) {};
network.on(''select'', function(properties) {
onSelect(properties);
});
}
}
});
Que utilizo en mi html como tal:
<vis-network ng-model="network_data" options="network_options" on-select="onNodeSelect" id="previewNetwork">
</vis-network>
Luego en mi controlador tengo lo siguiente:
$scope.nodes = new vis.DataSet();
$scope.edges = new vis.DataSet();
$scope.network_data = {
nodes: $scope.nodes,
edges: $scope.edges
};
$scope.network_options = {
hierarchicalLayout: {
direction: "UD"
}
};
$scope.onNodeSelect = function(properties) {
var selected = $scope.task_nodes.get(properties.nodes[0]);
console.log(selected);
};
$scope.nodes.add([
{id: 1, label: ''Node 1''},
{id: 2, label: ''Node 2''},
{id: 3, label: ''Node 3''},
{id: 4, label: ''Node 4''},
{id: 5, label: ''Node 5''}]);
$scope.edges.add([
{id: 1, from: 1, to: 2},
{id: 2, from: 3, to: 2}
]);