CODEWITHSUNDEEP
javascriptvisualizationvis.js
dust
dust

Reputation: 512

vis.js slow with many nodes / edges

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

Upvotes: 5

Views: 11038

Answers (5)

Fabien
Fabien

Reputation: 975

I used to have poor performance with many images

Adding this in options solved the problem :

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

Upvotes: 5

B.Kiener
B.Kiener

Reputation: 1

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.

Upvotes: 0

shekhar
shekhar

Reputation: 81

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

Upvotes: 1

shekhar
shekhar

Reputation: 81

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

Upvotes: 1

Raul Sena Ferreira
Raul Sena Ferreira

Reputation: 143

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

Upvotes: 3

Related Questions