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);
I used to have poor performance with many images
Adding this in options solved the problem :
nodes: {
shapeProperties: {
interpolation: false // 'true' for intensive zooming
}
}
Try to use layout: {improvedLayout:false}
inside options.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With