AngularJS中的Zoomable网络图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS中的Zoomable网络图相关的知识,希望对你有一定的参考价值。

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

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

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

答案

我一直在以角度方式试验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}
    ]);
另一答案

这应该是在Software Recommendation StackExchange上,但由于赏金,我不能投票结束。

GoJS支持您的所有要求,并与Angular(simple demo here)一起工作。 (内置模型存储,数据绑定,缩放和平移的JSON)

另一答案

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

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

另一答案

在商业环境中,您还应该将yFiles for HTML视为一个库,以便为Angular(和AngularJS)支持的应用程序提供高质量的图形可视化。

它是一个功能齐全的图形绘制和编辑应用程序,可为您的所有图形和图表需求提供解决方案。

特别是1000个节点不是问题,至少如果这不是在低端的旧移动设备上,在这种情况下,只有简单的可视化才能提供良好的性能。但即便如此,使用独特的混合渲染引擎,可以在图表中同时利用所有SVG,Canvas和WebGL,甚至应该可行。

对于其上有一行文本的一千个节点,在低端设备上同时在屏幕上显示所有这些节点会有问题,但虚拟化在这里也有帮助。

有一些live, online demos显示不同级别的Angular(2+)和AngularJS集成,但如果您真的想在编程级别上使用该库,则应下载它并查看这些演示的非缩小源。对于Angular2 +开发,可以使用一整套TypeScript绑定,示例显示如何将角度数据绑定到图形可视化以及如何选择使用角度来模拟SVG可视化。当然,它们还包括核心图形可视化Angular组件。

披露:我为提供该图书馆的公司工作,但我并不代表我的雇主。

以上是关于AngularJS中的Zoomable网络图的主要内容,如果未能解决你的问题,请参考以下文章

javascript Zoomable Treemap#d3.v4

这可能吗:Zoomable SVG Image Map

D3 或 Rickshaw 中的可缩放、Google-Finance 风格的时间序列图? [关闭]

网络摄像头 getUserMedia API - AngularJS 错误?

二分图匹配入门专题1I - Hiding Gold light oj 1152二分图匹配-------------------我是终于不那么水的水题分割线------------------(代码片

种豆得豆,种瓜得瓜 : 你的网络就是一片自留地