Question

我正在构建一个可视化节点和边缘网络的页面。 vis.js做我想要的，但是我的数据很慢。

我正在使用的代码几乎是从vis.js的一个示例中逐字复制的。区别在于下面的数组节点和边每个包含~4000个元素（在下面的代码中我将它们截断为几个元素）。

这样的页面需要几分钟才能加载。关于如何加快速度的任何想法？

<div id="mynetwork"></div>
<script type="text/javascript">
var color = 'gray';
var len = undefined;


var nodes = [{"group": 1, "id": 1, "label": "my first node"}, {"group": 0, "id": 2944, "label": "my nth node"}];
var edges = [{"to": 2944, "from": 1}, {"to": 2945, "from": 2}, {"to": 2946, "from": 3}];

// create a network
var container = document.getElementById('mynetwork');
var data = {
    nodes: nodes,
    edges: edges
};
var options = {
    nodes: {
        shape: 'dot',
        size: 30,
        font: {
            size: 32,
            color: '#ffffff'
        },
        borderWidth: 2
    },
    edges: {
        width: 2
    }
};
network = new vis.Network(container, data, options);

Answer 1

我曾经在很多图片中表现不佳

在选项中添加此选项解决了问题：

nodes: {
  shapeProperties: {
    interpolation: false    // 'true' for intensive zooming
  }
}

Answer 2

尝试在内部选项中使用layout: {improvedLayout:false}。

Answer 3

您可以使用最符合您要求的不同算法

例如同样

var options = {
  physics:{
    enabled: true,
    barnesHut: {
      gravitationalConstant: -2000,
      centralGravity: 0.3,
      springLength: 95,
      springConstant: 0.04,
      damping: 0.09,
      avoidOverlap: 0
    },
    forceAtlas2Based: {
      gravitationalConstant: -50,
      centralGravity: 0.01,
      springConstant: 0.08,
      springLength: 100,
      damping: 0.4,
      avoidOverlap: 0
    },
    repulsion: {
      centralGravity: 0.2,
      springLength: 200,
      springConstant: 0.05,
      nodeDistance: 100,
      damping: 0.09
    },
    hierarchicalRepulsion: {
      centralGravity: 0.0,
      springLength: 100,
      springConstant: 0.01,
      nodeDistance: 120,
      damping: 0.09
    },
    maxVelocity: 50,
    minVelocity: 0.1,
    solver: 'barnesHut',
    stabilization: {
      enabled: true,
      iterations: 1000,
      updateInterval: 100,
      onlyDynamicEdges: false,
      fit: true
    },
    timestep: 0.5,
    adaptiveTimestep: true
  }
}

network.setOptions(options);

Answer 4

你也可以使用选项：

 {
   physics:{
        stabilizations:false
   }
 }

如果您想早点加载网络

并且最终的解决方案是，如果上述任何一个不起作用，你可以在稳定时存储网络x和y位置，并且可以使用稳定时的坐标来完成初始化...

see this related thread

Answer 5

与vis.js网络有类似的性能问题。我使用带有svg的图像节点作为图像源。在IE中，有大约40个节点的性能是可以接受的，但在Chrome中它的速度非常慢。它指出了svg图像的两个问题：

如果svg图片尺寸较大，例如1024X1024，则Chrome的渲染性能很差。
反之亦然：如果在svg标签中没有为源图像设置大小，那么IE很慢。

通过在svg标签中为我的所有svg图像设置= 36，height = 36来修复它。现在它在两种浏览器中都能很好地工作。也许这对其他人也有帮助。

vis.js因许多节点/边缘而变慢

5 个答案: