在AngularJS可缩放的网络图 [英] Zoomable network graph in AngularJS

问题描述

我想在一个AngularJS应用程序的可视化网络图。节点和边缘存储为一个JSON对象，节点将被添加和修改以后（比如每30秒一次）。我想用角数据绑定自动更新图表JSON对象发生变化时。该图将有10-1000节点。这些节点将是包含每个句子矩形文本节点。我想在图形上ZOOM-和泛能。

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:

• ArborJS

这是容易使角动态更新工作（使用 ParticleSystem.merge ）。然而，植树节似乎并不支持可缩放的行为，它似乎并没有得到很好的支持。例如，单节点的错误仍然没有得到解决。

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.

D3

有力可缩放的布局演示，和各个地方都有使用D3与角度信息。 D3是很好的支持，但似乎级低于下面的选项。例如，创建网络图，用好看的矩形节点标签似乎平凡的。

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

VisJS支持可缩放的网络图，并有工作正在进行中角库，但我不知道这两个VisJS和角图书馆如何可靠？

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

SigmaJS还支持可缩放的网络图，但我不知道是否有角起着很好。

SigmaJS also supports zoomable network graphs, but I don't know whether it plays nicely with Angular.

CytoscapeJS

KMAP

还有其他相关的库？什么是用于该项目的最好的图书馆，我怎么能实现这样一个可缩放的动态网络图中给出的图书馆吗？

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?

推荐答案

我一直在尝试在角VisJs，和我真的很喜欢它至今。他们的网络既是可平移和缩放，并可以选择节点。该文档已被容易跟踪和有很多的在其网站上的例子。
由于可见的网络可以动态地更新，我发现它很容易在我的角度整合的应用程序。例如，我创造了这个指令：

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

        }

    }
});

我在HTML中使用像这样：

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

这篇关于在AngularJS可缩放的网络图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！