JavaScript网络图形可视化

问题描述：

我需要一个网络可视化图形（不是图表）在JavaScript中的JSON输入。我还使用JIT infovis工具包rgraph和空间树来显示图形中的多个级别。但节点越来越庞大的数据崩溃。在rgraph中，边缘arroheads与节点合并，在太空树中，如果孩子有4个父母，它将孩子放在太宽的地方。所以对于大量的数据来说它并不稳定。但我找不到类似于infovis json输入格式的图表。请建议我选择或解决方案来解决infovis space tree和rgraph。在此先感谢JavaScript网络图形可视化

答

据我所知，有几个开源项目JS对图形可视化工作。

JIT，您正在使用。
arborjs
protovis来自斯坦福大学。这看起来不错，但它不再处于活跃的发展。

说实话，我从来没有使用过在我的项目。你可以自己尝试。

似乎D3的主要开发是前者protovis开发。他似乎已经转向d3。所以这可能是为什么protovis不再被维护的原因。 – ptikobj 2013-05-15 08:30:56

答

还检出D3，一个“基于数据操作文档的JavaScript库”和sigma.js，一个“使用HTML canvas元素绘制图形的开源轻量级JavaScript库”。

答

你可能想看看这个互动的HTML5图表库，通过数据可视化软件实验室提供：

http://datavisualizationsoftwarelab.com/

此SDK可让您创建广泛的图表：基于

时间图表
网络图表
饼图
即将推出的地质图，图面和XML图表

图是纯HTML5，其他库没有依赖关系，从而轻易地与JS框架（如jQuery）集成。使用Canvas进行渲染，对导航，交互和数据探索有全面的多点触控支持。

网络图的一个例子：

图表来与广泛API和设置，这样就可以控制图表的各个方面。

答

结帐netjsongraph.js，使用了NetJSON格式，这是专门为网络软件设计了一种基于D3一个简单的JavaScript库。

见netjsongraph demo example。

我希望它有帮助。

答

至于我 - 我喜欢vis.js，因为：

产生的网络是有弹性的 - 自动适应用户网络重新塑造
一些有用的UI功能都集成 - 如放大/缩小-out
网络是高度可定制的， - 边缘颜色，宽度等...
当定义网络节点时 - 无需为节点指定X，Y坐标。
（我已经看到了一些LIB的，你需要定义X，Y COORDS为节点，那真的很烂）
更何况，这是很容易使用这个libarary， - 见下：

用法：

// create an array with nodes 
    var nodes = new vis.DataSet([ 
    {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'} 
    ]); 

    // create an array with edges 
    var edges = new vis.DataSet([ 
    {from: 1, to: 3, width: 1}, 
    {from: 1, to: 2, width: 6}, 
    {from: 2, to: 4, width: 1}, 
    {from: 2, to: 5, width: 3}, 
    {from: 2, to: 3, width: 1}, 
    ]); 

    // create a network 
    var container = document.getElementById('mynetwork'); 
    var data = { 
    nodes: nodes, 
    edges: edges 
    }; 
    var options = {}; 
    var network = new vis.Network(container, data, options);

Demo

JavaScript网络图形可视化

相关推荐