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'
}
}
Share
Improve this question
edited Feb 20, 2017 at 11:38
Christophe Roussy
17k5 gold badges93 silver badges87 bronze badges
asked Jun 9, 2016 at 12:43
MarothMaroth
1951 gold badge2 silver badges7 bronze badges
2
- 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
Reset to default 7In 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!