blocks|key|152811|text|有一个很好的演示/示例，其中包含D3中的源码的网络图：http://christophergandrud.github.io/d3Network/功能都在那里，而D3似乎与JSON配合得很好。根据我的研究，这是一个很好的可视化类库的选择。许多其他库(石墨等)也支持相同的功能，但更难实现，也不是非常活跃。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|152812|NVD3是为AngularJS设计的D3的变体，也可以工作。在NVD3中实现图形和图表在AngularJS中比在D3中更容易。|152813|entityMap|0|LINK|mutability|MUTABLE|url|http://christophergandrud.github.io/d3Network/^0|R|1A|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

There is a good demo/example of a network map with sourcecode in D3: <a href="http://christophergandrud.github.io/d3Network/" rel="nofollow">http://christophergandrud.github.io/d3Network/</a>
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.

blocks|key|155593|text|这真的应该放在Software+Recommendation+StackExchange上，但由于赏金的原因，我不能投票关闭。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|155594|GoJS支持您的所有需求，并可与Angular+(simple+demo+here)一起使用。(用于内置模型存储、数据绑定、缩放和平移的JSON)|155595|entityMap|0|LINK|mutability|MUTABLE|url|https://softwarerecs.stackexchange.com/|1|http://www.gojs.net/latest/index.html|2|http://www.gojs.net/latest/samples/angular.html^0|7|N|0|0|0|4|1|P|G|2|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]|$A|Z|B|10|1|11]]|C|$]]|$1|F|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]]]

This should really be on <a href="https://softwarerecs.stackexchange.com/">Software Recommendation</a> StackExchange but I can't vote to close because of the bounty.

<a href="http://www.gojs.net/latest/index.html" rel="nofollow noreferrer">GoJS</a> supports all of your requirements and works alongside Angular (<a href="http://www.gojs.net/latest/samples/angular.html" rel="nofollow noreferrer">simple demo here</a>). (JSON for Model storage, data-binding, zoom and pan built in)

blocks|key|151707|text|我一直在用angular做VisJs的实验，到目前为止我真的很喜欢它。它们的网络既可pannable也可缩放，并且您可以选择节点。文档很容易理解，在他们的网站上有很多例子。由于vis的网络可以动态更新，我发现很容易将其集成到我的angular应用程序中。例如，我创建了这个指令：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|151708|app.directive('visNetwork',+function()+{
++++return+{
++++++++restrict:+'E',
++++++++require:+'%5EngModel',
++++++++scope:+{
++++++++++++ngModel:+'=',
++++++++++++onSelect:+'&',
++++++++++++options:+'='
++++++++},
++++++++link:+function($scope,+$element,+$attrs,+ngModel)+{
++++++++++++var+network+=+new+vis.Network($element[0],+$scope.ngModel,+$scope.options+%7C%7C+{});

++++++++++++var+onSelect+=+$scope.onSelect()+%7C%7C+function(prop)+{};
++++++++++++network.on('select',+function(properties)+{
++++++++++++++++onSelect(properties);
++++++++++++});

++++++++}

++++}
});|code-block|syntax|javascript|151709|我在html中使用它，如下所示：|151710|<vis-network+ng-model="network_data"+options="network_options"+on-select="onNodeSelect"+id="previewNetwork">
</vis-network>|151711|然后，在我的控制器中，我有以下内容：|151712|++++$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}
++++]);|151713|entityMap|0|LINK|mutability|MUTABLE|url|https://visjs.org/^0|D|5|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|C|$]]|$1|O|3|P|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

I've been experimenting in <a href="https://visjs.org/" rel="nofollow noreferrer">VisJs</a> 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:
<pre><code>app.directive('visNetwork', function() {
 return {
 restrict: 'E',
 require: '^ngModel',
 scope: {
 ngModel: '=',
 onSelect: '&amp;',
 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);
 });

 }

 }
});
</code></pre>
Which I use in my html like so:
<pre><code>&lt;vis-network ng-model=&quot;network_data&quot; options=&quot;network_options&quot; on-select=&quot;onNodeSelect&quot; id=&quot;previewNetwork&quot;&gt;
&lt;/vis-network&gt;
</code></pre>
Then in my controller I have the following:
<pre><code> $scope.nodes = new vis.DataSet();
 $scope.edges = new vis.DataSet();
 $scope.network_data = {
 nodes: $scope.nodes,
 edges: $scope.edges
 };
 $scope.network_options = {
 hierarchicalLayout: {
 direction: &quot;UD&quot;
 }

 };

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

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:

<ul>
<li><a href="http://arborjs.org/">ArborJS</a>

It is easy to make dynamic updating work with Angular (using <code>ParticleSystem.merge</code>). However, Arbor does not seem to support zoomable behavior, and it does not seem to be well-supported. For example, the <a href="https://github.com/samizdatco/arbor/pull/29">single-node bug</a> is still unresolved.</li>
<li><a href="http://d3js.org/">D3</a>

There is <a href="http://bl.ocks.org/benzguo/4370043">a zoomable force layout demo</a>, 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 href="https://groups.google.com/forum/#!topic/d3-js/Q5H8CuLpm1k">a network graph with good-looking rectangular node labels</a> seems nontrivial.</li>
<li><a href="http://visjs.org/">VisJS</a>

VisJS supports zoomable network graphs, and there is <a href="https://github.com/visjs/angular-visjs">a work-in-progress Angular library</a>, but I don't know how reliable both VisJS and its Angular library are.</li>
<li><a href="http://sigmajs.org/">SigmaJS</a>

SigmaJS also supports zoomable network graphs, but I don't know whether it plays nicely with Angular.</li>
<li><a href="http://cytoscape.github.io/cytoscape.js/">CytoscapeJS</a></li>
<li><a href="https://github.com/cjrd/kmap">kmap</a></li>
</ul>

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?

Zoomable network graph in AngularJS

JSON

我想在AngularJS应用程序中可视化一个网络图。节点和边被存储为JSON对象，稍后将添加和修改节点(例如每30秒一次)。我想使用Angular数据绑定在JSON对象发生变化时自动更新图形。该图将有10-1000个节点。节点将是矩形文本节点，每个节点包含大约一个句子。我想要的图表是缩放和平移。到目前为止，我知道以下选...

问AngularJS中可缩放的网络图
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS中可缩放的网络图EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS中可缩放的网络图
EN