CODEWITHSUNDEEP
javascriptchartsvis.jsvis.js-network
floatingpurr
floatingpurr

Reputation: 8559

Plotting huge trees with vis.js

I'm trying to plot a quite huge network (i.e., ~1k nodes and ~1k edges) with vis.js 4.21.0. Here is my options object:

var options = {
    autoResize: true,
    height: '400px',
    clickToUse: false,
    layout: {
        hierarchical: {
            direction: 'UD',
            sortMethod: 'directed',
        }
    },
    physics: {
       stabilization: false,
       barnesHut: {
            gravitationalConstant: -80000,
            springConstant: 0.001,
            springLength: 200
       }
    },
    nodes: {
        shape: 'dot',
        size: 20,
        font: {
            size: 15,
            color: '#ffffff'
        },
        borderWidth: 2
    },
    groups: groups,
 };

The problem is that it takes up to 4 minutes to render (see this simplified JSFiddle). In this example, much huger than the mine, the network is rendered almost instantaneously.

How can I speed up the rendering process of my chart?

Upvotes: 3

Views: 2648

Answers (1)

YakovL
YakovL

Reputation: 8316

Wait, your fiddle doesn't have all the options you mention in your post. For instance, the network is not shown at all before several minutes passes, but if you add physics: { stabilization: false } it is shown at once (although it is not static at that point and slowly relaxes). Moreover, adding barnesHut: { ... } to physics and adjusting springConstant changes the speed of relaxation.

But here's a tricky part: compare the unrelaxed tree (with stabilization: false) that you have with vis.js 4.21.0 and the one that you get with 4.19.1! It looks much nicer:

enter image description here

than this mess:

enter image description here

This was reported earlier and probably deserves more digging but what I can say for sure is 4.19.1 makes the initial tree much nicer to see stuff even before getting relaxed. With this version you can even go physcis: false and get this:

enter image description here

I'd consider using this approach although it has drawbacks:

enter image description here

the version with physics suffers from that to some extent too, so...

Upvotes: 2

Related Questions