2012-01-06 64 views
13

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

回答

3

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

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

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

+0

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

6

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

1

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

http://datavisualizationsoftwarelab.com/

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

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

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

网络图的一个例子:

enter image description here

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

0

至于我 - 我喜欢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