I am trying to visualize some graphs. Unfortunately I often get situation when one node overlaps another, as shown below:

Setting nodeSpacing option doesn't fit me because some node labels are extremely long and some are short. Is there any option setting dynamical positioning? Here are my options:

    var options = {
         layout:{
             hierarchical: {
                 enabled:true,
                 parentCentralization: true,
                 direction: 'DU',
                 sortMethod: 'directed'
                }
         },
         edges:{
             arrows: 'from'
         }
 }

I am trying to visualize some graphs. Unfortunately I often get situation when one node overlaps another, as shown below:

Setting nodeSpacing option doesn't fit me because some node labels are extremely long and some are short. Is there any option setting dynamical positioning? Here are my options:

    var options = {
         layout:{
             hierarchical: {
                 enabled:true,
                 parentCentralization: true,
                 direction: 'DU',
                 sortMethod: 'directed'
                }
         },
         edges:{
             arrows: 'from'
         }
 }

• javascript
• physics
• vis.js

• Play around with: visjs/examples/network/physics/physicsConfiguration.html, then use 'generated config' – Christophe Roussy Commented Feb 20, 2017 at 11:33
• You may also use direction LR instead of DU to avoid label overlap. – Christophe Roussy Commented Feb 20, 2017 at 11:41

1 Answer 1

In the Physics options there is an option for hierarchicalRepulsion which you can play with - it all depends on your graph, I guess. I took their basic example of a hierarchical layout and added really long label names and used this config:

physics: {
    enabled: true,
    hierarchicalRepulsion: {
        centralGravity: 0.0,
        springLength: 500,
        springConstant: 0.01,
        nodeDistance: 400,
        damping: 0.09
    },
    solver: 'hierarchicalRepulsion'
}

I played around with large values for springLength and nodeDistance and this is the sort of thing you can get back:

Zoomed in a bit more, so you can see the captions:

There's still a bit of overlap lower down the hierarchy though - but it gives you a starting point to play with.

Also, consider the usability of really long captions - at some point you might want to start using tool-tips and other work-arounds. Once again - all depends on your network.

Good luck - it's an awesome library!