d3.js - 将链接大小设置为强制布局

时间:2013-04-25 13:53:08

标签: d3.js force-layout

基于Michael Bostock的“Molecule”示例,可在此网址获取:http://bl.ocks.org/mbostock/3037015

我正在尝试使用多个值设置链接的大小。为此,我禁用了“重力”,在“充电”中添加了一个重要的负值,并将第一个节点固定在窗口的中心。

var force = d3.layout.force()
    .size([width, height])
    .charge(-800)
    .friction(0.45)
    .linkStrength(1)
    .gravity(0)
    .linkDistance(function(d) { 
        return radius(d.target.size * 10);
     });

我的问题是(as you can see on the image below)有时候链接的大小是不同的,特别是对于用一点点值定义的链接。

有人知道我的问题的一个好方法吗?

您可以在此处查看我的代码:http://jsfiddle.net/awPn3/

2 个答案:

答案 0 :(得分:3)

力布局的一个特征是链接的长度是可变的 - 重点是节点自动布局,您不必担心它。您可以实施检查以确保距离始终是您希望的距离,但这将非常困难。

您已经使用的linkDistance函数是(弱)强制执行此类约束的唯一直接方法。如果这还不够,那就没有简单的方法可以减轻它。您唯一的选择就是在模拟的每个刻度上执行上面提到的检查。

答案 1 :(得分:0)

我想当你修改你使用的函数时,它会有所帮助,也可以考虑两端对象的大小。让解决方案优化以设置两个对象之间的“可见”距离:例如沿着(d.source.size + d.target.size)+ desired_distance

的行