JavaScript 网络可视化？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10886705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript network visualization?
提问by wong2
I'm looking for a library to visualize a network.
我正在寻找一个库来可视化网络。
I just need to add some nodes(node has text on them), add edges between them, (edges are directed and have text on them).I don't want to set the position of anything by hand.
我只需要添加一些节点（节点上有文本），在它们之间添加边，（边是定向的并且上面有文本）。我不想手动设置任何东西的位置。
I'd like API simple as:
我希望 API 简单如下：
var node1 = X.addNode(1, "Hello"),
node2 = X.addNode(2, "World");
X.addEdge(node1, node2, "helloworld");
I've searched for hours, looked after arborjs, sigma.js, d3.js, JavaScript InfoVis Toolkit, none of them satisfied me.
我已经搜索了几个小时，看了 arborjs、sigma.js、d3.js、JavaScript InfoVis Toolkit，没有一个让我满意。
Is there anything else I can try?
还有什么我可以尝试的吗？
回答by Li0liQ
Check out VivaGraphJS.
Amazon Visualization sampleby VivaGraphJS.
查看VivaGraphJS。VivaGraphJS 的
Amazon 可视化示例。
Layout configuration sample, uses WebGL as a renderer.
布局配置示例，使用 WebGL 作为渲染器。
回答by David
We produce mxGraph, but note this is a commercial library, not open source. I'm not sure exactly why the open source libraries you listed failed, but certainly forming the graph, setting the geometry and labels are all fairly trivial function calls.
我们生产mxGraph，但请注意这是一个商业库，而不是开源。我不确定为什么你列出的开源库失败了，但可以肯定的是，形成图形、设置几何和标签都是相当简单的函数调用。
回答by Aerodynamika
What's the problem with sigma.js? The library's website has a very simple example to draw the nodes and edges:
sigma.js 有什么问题？图书馆的网站有一个非常简单的例子来绘制节点和边：
var sigRoot = document.getElementById('sig');
var sigInst = sigma.init(sigRoot);
sigInst.addNode('hello',{
label: 'Hello',
color: '#ff0000'
}).addNode('world',{
label: 'World !',
color: '#00ff00'
}).addEdge('hello_world','hello','world').draw();
回答by Andrei Neculau
Check this page of sigma.js
http://sigmajs.org/examples/a_plugin_example.html
and you will see how they do a random or a circular layout.
检查 sigma.js
http://sigmajs.org/examples/a_plugin_example.html 的此页面，
您将看到它们如何进行随机或圆形布局。
回答by Dan Herman
回答by WillyFogg 66
Try out cne-tnetwork. It is javascript visualization library to create and draw network graphs. It is SVG-based and HTML 5 compatible. It is publicly available on github, licensed under the GNU Afferro license. You can find how to use it in the readmeof the library. It has a mode to drag the nodes. The links between nodes can be unidirectional, bidirectional or even "buses" that connect several elements. With CSS you can customize all your styles (nodes, links, arrows, buses...).
试试cne-tnetwork。它是用于创建和绘制网络图的 javascript 可视化库。它基于 SVG 并且与 HTML 5 兼容。它在 github 上公开可用，根据 GNU Afferro 许可证获得许可。您可以在库的自述文件中找到如何使用它。它具有拖动节点的模式。节点之间的链接可以是单向的、双向的，甚至可以是连接多个元素的“总线”。使用 CSS，您可以自定义所有样式（节点、链接、箭头、总线...）。
