vis.js slow with many nodes / edges

dust picture dust · Sep 18, 2015 · Viewed 7.1k times · Source

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

Answer

Fabien picture Fabien · May 14, 2017

I used to have poor performance with many images

Adding this in options solved the problem :

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