javascript - 在 vis.js 中使节点间距动态变化

Question

我正在尝试可视化一些图表。不幸的是，我经常遇到一个节点与另一个节点重叠的情况，如下所示:

设置 nodeSpacing 选项不适合我，因为有些节点标签很长，有些很短。是否有设置动态定位的选项？这是我的选择:

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

Answer 1

在Physics options hierarchicalRepulsion 有一个选项可供您使用 - 我猜这完全取决于您的图表。我采用了他们的分层布局的基本示例并添加了很长的标签名称并使用了这个配置:

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

我为 springLength 和 nodeDistance 设置了很大的值，这是你可以得到的东西:

再放大一点，这样您就可以看到标题了:

虽然在层次结构的下方仍有一些重叠 - 但它为您提供了一个开始玩的起点。

此外，请考虑超长字幕的可用性 - 在某些时候您可能想要开始使用工具提示和其他变通方法。再次重申 - 一切都取决于您的网络。

祝你好运 - 这是一个很棒的图书馆!