Vis.js速度慢，有很多节点/边

vis.js slow with many nodes / edges

本文关键字：节点 js 速度慢 Vis      更新时间：2023-09-26

我正在构建一个页面来可视化节点和边的网络。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);

我曾经在许多图像上表现不佳

将此添加到选项中解决了问题:

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

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

您可以使用最适合您需求的不同算法

例如

与

相同
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);

你也可以使用options:

 {
   physics:{
        stabilizations:false
   }
 }

如果你想提前加载网络

，最后的解决方案是，如果以上任何一个都不起作用，你可以存储网络的x和y位置，当它稳定时，可以用稳定时的坐标进行初始化…

查看相关线程

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

  • 如果svg图像有大的尺寸，如1024X1024，那么chrome渲染性能很差。

  • 在IE中则相反:如果svg标签中没有设置源图像的大小，则IE很慢。

通过在svg标签中设置=36,height=36来修复它。现在它在两个浏览器中都能很好地工作。也许这对其他人也有帮助。

相关文章：