最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Make node spacing change dynamically in vis.js - Stack Overflow

programmeradmin1浏览0评论

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
Add a ment  | 

1 Answer 1

Reset to default 7

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!

发布评论

评论列表(0)

  1. 暂无评论