8

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:

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.)

3

Based on a previous answer I gave on StackOverflow I would add to your list the following:

  • VivaGraph it's a free and open source tool for graph visualization tool - but it has a smaller community compared to SigmaJS. It has the zoom feature. Don't know anything about Angular integration though.

  • Keylines it's a commercial graph visualization tool, with advanced stylings, analytics and layouts, and they provide copy/paste demos if you are using Neo4J or Titan. It is not free, but it does support even older browsers - IE7 onwards... It has the "zoom" feature and there's a simple (beta) Angular wrapper.

Disclaimer: I'm part of the KeyLines team.

2

yFiles for HTML, a commerical graph drawing library for Javascript/HTML5 offers the features you are looking for:

You can import nodes and edges from JSON structures and dynamically update the graph later on. This feature is shown in these demos. The visualization supports zooming and virtually infinite panning. Zooming and panning as well as other graph interaction (editing) can be done via the mouse, pen, the keyboard, and touch input. More advanced examples are available here. Since adding nodes and edges dynamically requires intelligent placements of the new elements, yFiles provides the most advanced automatic layout implementations available for JavaScript and TypeScript to date.

There are a few AngularJS and Angular2+ demos that show how to possibly integrate the library with AngularJS and Angular(2+). The demos shows all possible integration features:

  • You can have the control itself be implemented as an angular directive
  • You can use Angular to style and databind the SVG snippets for the visualization of the nodes and labels
  • You can use Angular's data binding features to drive the graph structure: adding elements to a list will automatically add them to the graph and you can make use of angular's filtering mechanism, too to filter the graph, e.g.

Disclaimer: I work for the company that creates that library (that's why I know about that demo), but on SE I do not represent my employer.

1

Linkurious.js plays well with Angular, and it is free for open source projects. I've built a complex web app for graph visualization (a few thousand nodes) with them.

However I strongly recommend NOT to use Angular two-way data binding for checking changes in objects because Angular has to hash the object at each $digest cycle, and it is a costly operation. A traditional pub-sub architecture would avoid performance drop.

Disclaimer: I work at Linkurious SAS.

0

GoJS is a general purpose JavaScript diagramming library

There's loads of built-in interactivity that make it easy for users to create and modify their own diagrams. See a flowchart example here, or lots of other diagram types here.

  • Built in, users can drag and drop nodes from palettes, draw new links, rearrange/resize nodes, reshape links.
  • Templates for Nodes, Links, and Groups, can be arbitrarily complex and include custom shapes/geometries
  • Support for user-created links with arbitrary link validation
  • With links, Orthogonal and Bezier link routing with "Avoids Nodes" and "Jump Over" options
  • Data binding with JSON data
  • Intuitive Drag-and-Drop & Copy-Paste functionality
  • Unlimited extensible Undo and Redo
  • Mouse and touch support with customizable tools
  • Automatic layout of graphs
  • Palettes and Overviews

Disclaimer: I'm one of the lead developers of GoJS

  • How well does it play with AngularJs? I would expect to update the $scope in my controller and have the view (diagram) update automatically. If it doesn't, it's not Angular. Perhaps there is a wrapper? – Mawg Aug 21 '15 at 9:29
  • see: gojs.net/latest/samples/angular.html – Simon Sarris Aug 21 '15 at 13:55
  • Is it "zoom- and pan-able"? As it is the main point of the question, a animated GIF showing that would make this a great answer :-) – Nicolas Raoul Oct 4 '18 at 3:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.