Search code examples
javascriptvis.jsvis.js-network

Vis.js not showing graph when many nodes are added

I am making a web app to show relationships between items using Vis.js, everything works perfectly fine until I get to the point where I need to display ~260 nodes with ~1200 edges between them.

Once I get to that amount of nodes, the graph just shows a blank space and a blue line, nothing else. As soon as I try to zoom it, the line disappears and it's all white.

When I look at the position of the nodes I can see that many of them are in negative or very big x, y positions (generally -300 for x and around 478759527705558300000 for y).

I have tried, to no avail, to disable physics. The graph is in hierarchichal mode, with levels manually set in the code, but the levels are correct.

Network options (the improvedLayout option was just a possibility I found on the internet; it works just the same if I remove it):

    var options = {
        layout: {
            improvedLayout: false,
            hierarchical: {
                direction: direction,
                sortMethod: "directed"
            }
        }
    }

Screenshot: Screenshot

Solution

  • I have hierarchical layout graph which consists of around 615 nodes and 614 edges (excluding 40 odd cluster nodes, some of them cluster of clusters). I landed into same problem with visjs.

    One quick thing which helped me to get over this problem was to explicitly call network.stabilize() method with an argument specifying number of iterations. Default iterations are 1000. I passed 10000 and graph stabilized it self nicely. It took a few more seconds, i was fine with that. But stabilization times shoots up as number nodes increased to ~1000. So i started looking into visjs code for solution.

    While looking in visjs code, i found that inside function setupHierarchicalLayout() there is a call to _condenseHierarchy(). This method tries to minimize white spaces between nodes and edges (yet to understand the code fully). _condenseHierarchy() modifies coordinates of a node. See Y coordinate before and after call to _condenseHierarchy() below:

    (this.body.nodes["node-11"]).y
1530
(this.body.nodes["node-11"]).y
64920

    When a node gets a distant position it takes lots of iterations (in stabilize) to bring it closer together with other nodes in graph. I disabled _condenseHierarchy() and got the graph displayed nicely.

    I'm sure disabling _condenseHierarchy() would bring in some other issues as i proceed further. I am going to spend some more time to understand and experiment with _condenseHierarchy().