JavaScript 网络可视化？答案

【问题标题】：JavaScript network visualization?JavaScript 网络可视化？
【发布时间】：2012-06-08 20:16:43
【问题描述】：

我正在寻找一个可视化网络的库。

我只需要添加一些节点（节点上有文本），在它们之间添加边，（边是定向的并且上面有文本）。我不想手动设置任何东西的位置。

我想要简单的 API：

var node1 = X.addNode(1, "Hello"),
    node2 = X.addNode(2, "World");
X.addEdge(node1, node2, "helloworld");

我已经搜索了几个小时，关注了 arborjs、sigma.js、d3.js、JavaScript InfoVis Toolkit，没有一个让我满意。

还有什么我可以尝试的吗？

【问题讨论】：

相关的，如果不是重复的话：stackoverflow.com/questions/10886705/… 和 stackoverflow.com/questions/8749706/…

标签： javascript html visualization

【解决方案1】：

我发现这个 javascript 库很有帮助。查看网络示例页面：

visjs

【讨论】：

【解决方案2】：

试试cne-tnetwork。它是用于创建和绘制网络图的 javascript 可视化库。它基于 SVG 并兼容 HTML 5。它在 github 上公开可用，在 GNU Afferro 许可下获得许可。您可以在库的readme 中找到如何使用它。它具有拖动节点的模式。节点之间的链接可以是单向的、双向的，甚至可以是连接多个元素的“总线”。使用 CSS，您可以自定义所有样式（节点、链接、箭头、总线...）。

【讨论】：

【解决方案3】：

我们生成mxGraph，但请注意这是一个商业库，不是开源的。我不确定您列出的开源库失败的确切原因，但可以肯定的是，形成图形、设置几何图形和标签都是相当简单的函数调用。

【讨论】：

【解决方案4】：

查看 sigma.js 的这个页面
http://sigmajs.org/examples/a_plugin_example.html
你会看到他们是如何进行随机或圆形布局的。

【讨论】：

【解决方案5】：

查看VivaGraphJS。
亚马逊可视化sample VivaGraphJS。

布局配置sample，使用WebGL作为渲染器。

【讨论】：

【解决方案6】：

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();

【讨论】：