JavaScript网络图形可视化

Question

我需要在javascript中为json输入提供网络可视化图形(而不是图表).我还使用JIT infovis toolkit rgraph和space tree来显示图中的多个级别.但是节点因大量数据而崩溃.在rgraph中,边缘arroheads与节点合并,在空间树中如果孩子有4个父母则将孩子放得太宽.因此对大量数据不稳定.但我找不到类似于infovis json输入格式的图表.请建议我解决infovis空间树和rgraph的替代方案或解决方案.提前致谢

Answer 1

另请查看D3,一个"基于数据操作文档的JavaScript库"和sigma.js,一个"开源轻量级JavaScript库,使用HTML canvas元素绘制图形".

Answer 2

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

• 生成的网络具有弹性-自动适应用户网络的重塑
• 集成了一些有用的UI功能-例如放大/缩小
• 网络高度可定制-边缘颜色，宽度等
• 定义网络节点时-无需为节点指定X，Y坐标。
  （我已经看到了一些lib，您需要在其中为节点定义X，Y坐标，这确实很糟糕）
• 更不用说使用此库非常容易，请参阅下文：

用法：

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

演示版

Answer 3

据我所知，有一些开源js项目致力于图形可视化。

1. JIT，您正在使用的。
2. 乔木
3. 来自斯坦福大学的原型。看起来很棒，但它不再处于积极开发状态。

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