I would like to visualize a network graph in an AngularJS application. The nodes and edges are stored as a JSON object, and nodes will be added and modified later on (say once every 30 seconds). I want to use Angular data binding to automatically update the graph when the JSON object changes. The graph will have 10-1000 nodes. The nodes will be rectangular text nodes containing about a sentence each. I would like the graph to be zoom- and pan-able.
I know about the following options so far:
It is easy to make dynamic updating work with Angular (using
ParticleSystem.merge). However, Arbor does not seem to support zoomable behavior, and it does not seem to be well-supported. For example, the single-node bug is still unresolved.
There is a zoomable force layout demo, and various places have information on using d3 with Angular. D3 is well-supported, but it seems lower-level than the options below. For example, creating a network graph with good-looking rectangular node labels seems nontrivial.
VisJS supports zoomable network graphs, and there is a work-in-progress Angular library, but I don't know how reliable both VisJS and its Angular library are.
SigmaJS also supports zoomable network graphs, but I don't know whether it plays nicely with Angular.
Are there other relevant libraries? What is the best library to use for this project, and how can I implement such a zoomable dynamic network graph given the library?
(Originally posted on StackOverflow.)