javascript - AngularJS 中的可缩放网络图

Question

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

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

• ArborJS

  使用 Angular 可以轻松进行动态更新(使用 ParticleSystem.merge)。然而，Arbor 似乎不支持可缩放行为，而且似乎没有得到很好的支持。例如，single-node bug至今仍未解决。

• D3

  有a zoomable force layout demo ，并且各个地方都有有关将 d3 与 Angular 一起使用的信息。 D3 得到了很好的支持，但它似乎比下面的选项级别低。例如，创建 a network graph with good-looking rectangular node labels看起来不平凡。

• VisJS

  VisJS支持可缩放的网络图，有a work-in-progress Angular library ，但我不知道 VisJS 及其 Angular 库有多可靠。

• SigmaJS

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

• CytoscapeJS

• kmap

还有其他相关的库吗？该项目使用的最佳库是什么，以及如何在给定库的情况下实现这样的可缩放动态网络图？

Answer 1

我一直在 VisJs 进行实验有 Angular ，到目前为止我真的很喜欢它。他们的网络既可以平移又可以缩放，并且您可以选择节点。该文档很容易理解，并且他们的网站上有很多示例。 由于 vis 的网络可以动态更新，我发现很容易将其集成到我的 Angular 应用程序中。例如，我创建了这个指令:

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>

然后在我的 Controller 中我有以下内容:

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