javascript - Zoomable network graph in AngularJS -

javascript - Zoomable network graph in AngularJS -

i visualize network graph in angularjs application. nodes , edges stored json object, , nodes added , modified later on (say 1 time every 30 seconds). want utilize angular info binding automatically update graph when json object changes. graph have 10-1000 nodes. nodes rectangular text nodes containing sentence each. graph zoom- , pan-able.

i know next options far:

arborjs

it easy create dynamic updating work angular (using particlesystem.merge). however, arbor not seem back upwards zoomable behavior, , not seem well-supported. example, single-node bug still unresolved.

d3

there a zoomable forcefulness layout demo, , various places have info on using d3 angular. d3 well-supported, seems lower-level options below. example, creating a network graph good-looking rectangular node labels seems nontrivial.

visjs

visjs supports zoomable network graphs, , there a work-in-progress angular library, don't know how reliable both visjs , angular library are.

sigmajs

sigmajs supports zoomable network graphs, don't know whether plays nicely angular.

cytoscapejs

kmap

are there other relevant libraries? best library utilize project, , how can implement such zoomable dynamic network graph given library?

i've been experimenting in visjs in angular, , i'm liking far. network both pannable , zoomable, , can select nodes. documentation has been easy follow , there lot of examples on site. since vis's networks can dynamically update, found easy integrate in angular app. example, created directive:

app.directive('visnetwork', function() { homecoming { 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); }); } } });

which utilize in html so:

<vis-network ng-model="network_data" options="network_options" on-select="onnodeselect" id="previewnetwork"> </vis-network>

then in controller have following:

$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} ]);

javascript angularjs graph d3.js sigma.js