AngularJS中的Zoomable网络图

Question

我想在AngularJS应用程序中可视化网络图.节点和边缘存储为JSON对象,稍后将添加和修改节点(例如每30秒一次).我想使用Angular数据绑定在JSON对象更改时自动更新图形.该图将具有10-1000个节点.节点将是矩形文本节点,每个节点包含一个句子.我希望图表可以缩放和平移.

到目前为止我知道以下选项:

• ArborJS

  使用Angular(使用ParticleSystem.merge)可以轻松进行动态更新.然而,Arbor似乎不支持可缩放行为,并且似乎没有得到很好的支持.例如,单节点错误仍未解决.

• D3

  有一个可缩放的力布局演示,各个地方都有关于使用带有Angular的d3的信息.D3得到了很好的支持,但似乎比下面的选项更低.例如,创建具有漂亮的矩形节点标签的网络图看起来并不重要.

• VisJS

  VisJS支持可缩放的网络图,并且有一个正在进行中的Angular库,但我不知道VisJS及其Angular库的可靠性如何.

• SigmaJS

  SigmaJS还支持可缩放的网络图,但我不知道它是否与Angular很好地配合.

• CytoscapeJS

• KMAP

还有其他相关的图书馆吗？什么是用于此项目的最佳库,以及如何在库中实现这样的可缩放动态网络图？

Answer 1

我一直在以角度方式试验VisJs,到目前为止我真的很喜欢它.他们的网络既可以平移也可以缩放,您可以选择节点.文档很容易理解,他们的网站上有很多例子.由于vis的网络可以动态更新,我发现很容易将它集成到我的角度应用程序中.例如,我创建了这个指令:

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中使用的是这样的:

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

然后在我的控制器中我有以下内容:

    $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

这应该是软件推荐 StackExchange,但由于赏金,我不能投票结束.

GoJS支持您的所有要求,并与Angular一起工作(此处为简单演示).(内置模型存储,数据绑定,缩放和平移的JSON)

Answer 3

在 D3 中有一个很好的带有源代码的网络地图演示/示例： http: //christophergandrud.github.io/d3Network/ 功能都在那里，而且 D3 似乎与 JSON 配合得很好。根据我的研究，这是可视化库的一个不错的选择。许多其他库（石墨等）也支持相同的功能，但更难实现并且不是非常活跃。

NVD3 是 D3 的变体，专为 AngularJS 设计，也可以工作。在 AngularJS 中，从 NVD3 中实现图形和图表比 D3 更容易。