Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 737
dust Avatar asked Jan 07 '23 13:01

dust


2 Answers

I used to have poor performance with many images

Adding this in options solved the problem :

nodes: {
  shapeProperties: {
    interpolation: false    // 'true' for intensive zooming
  }
}
like image 180
Fabien Avatar answered Jan 18 '23 10:01

Fabien


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

like image 23
Raul Sena Ferreira Avatar answered Jan 18 '23 11:01

Raul Sena Ferreira