vis.js slow with many nodes / edges

Question

I'm building a page to visualize a network of nodes and edges. vis.js does what I want, but it is very slow with my data.

The code I'm using is copied almost verbatim from one of the examples at vis.js. The difference is that the arrays nodes and edges below contain ~4000 elements each (in the code below I've truncated them to several elements).

A page like this takes several minutes to load. Any ideas on how to make it faster?

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

Tzong

Answer 1

I used to have poor performance with many images

Adding this in options solved the problem :

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

Amadavat

Answer 2

Try to use layout: {improvedLayout:false} inside options.

Furfuran

This helped me get all the nodes within a very short time. But the nodes do not stabilise and it seems like they are taking forever to stop moving. Can you suggest any roundabouts for this? Also I want to display the nodes in a hierarchy. But with this the hierarchy seems to be lost. – Windmill

Answer 3

You can use different algorithm which fit best in your requirement

for example same like

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

Algorithm

Answer 4

your can also use options:

 {
   physics:{
        stabilizations:false
   }
 }

if you want to load the network early

and final solution is if any of the above do not work you can store the network x and y position when it is stabilized and initializations can be done with the coordinates which was at the time of stabilization ...

see this related thread

Algorithm

Answer 5

Had similar performance issue with vis.js network. I used image nodes with svg as image source. In IE performance with about 40 nodes was acceptable, but in Chrome it was terrible slow. It pointed out two issues with the svg images:

• if svg image has big size, such as 1024X1024 then chrome has terrible rendering performance.

• in IE it is vice versa: if no size is set to the source image in svg tag, then IE is slow.

Fixed it by setting with=36, height=36 for all my svg images in svg tag. Now it works in both browsers very well. Maybe this is helpful for others too.

Hbomb