Zoomable network graph in AngularJS

Question

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 e

Answer 1

I've been experimenting in VisJs in angular, and I'm really liking it so far. Their network is both pannable and zoomable, and you can select nodes. The documentation has been easy to follow and there are a lot of examples on their site. Since vis's networks can dynamically update, I found it easy to integrate it in my angular app. For example, I created this directive:

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

        }

    }
});

Which I use in my html like so:

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

Then in my controller I have the 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}
    ]);

Answer 2

This should really be on Software Recommendation StackExchange but I can't vote to close because of the bounty.

GoJS supports all of your requirements and works alongside Angular (simple demo here). (JSON for Model storage, data-binding, zoom and pan built in)

Answer 3

In a commercial context you should also consider yFiles for HTML as a library for bringing high-quality graph visualization to Angular (and AngularJS) powered-apps.

It's a full-featured graph drawing and editing software library that provides solutions for all your graphing and diagramming needs.

Specifically 1000 nodes are not a problem, at least if this is not on low-end, older mobile devices, in which case only simple visualizations will provide good performance. But even then, with the unique hybrid rendering engine that can leverage all of SVG, Canvas, and WebGL at the same time in a diagram even that should work.

For a thousand nodes with each one line of text on them, on low-end devices it will be problematic to display all of them on the screen at the same time, however virtualization also helps here.

There are some live, online demos that show different levels of Angular(2+) and AngularJS integrations, but if you really want to play with the library on a programming level, you should download it and check out the non-minified sources for those demos. For Angular2+ development a complete set of TypeScript bindings is available and the samples show how to bind angular-data to the graph visualization as well as how to optionally use angular for the templating of the SVG visualizations. Of course they also include the core graph visualization Angular component.

^{Disclosure: I work for the company that provides that library, however I do not represent my employer on SO.}

Answer 4

There is a good demo/example of a network map with sourcecode in D3: http://christophergandrud.github.io/d3Network/ The functionality is all there, and D3 seems to play nice with JSON. From my research, this is a strong choice for a visualization library. Many other libraries (graphite, etc.) also support the same functionality but are harder to implement and aren't extremely active.

NVD3 is a variation of D3 designed for AngularJS that could also work. Implementing graphs and charts from within NVD3 is easier in AngularJS than D3 would be.