D3 布局：树状结构，但链接长度不同

Question

我遇到了非常有趣的布局问题。

我有足球比赛数据，尤其是球员和球队队长之间的成功传球次数。我们不关心非队长球员之间的传球。

所以根节点将是队长，每个叶子将呈现每个玩家，我们将拥有的所有链接只是根节点和每个叶子节点之间的链接。叶子之间没有联系。

我希望根节点位于图的中心，根据队长和玩家之间的成功传球次数，我们将决定根节点和叶子之间的链接长度。通过的次数越多，链接就越长。

我很想为此使用 d3 强制布局，因为我不希望播放器节点相互重叠。 我对这种方法有一些问题。我遇到的主要问题以及我在这里的原因是强制布局似乎不允许我在节点之间有不同的链接长度。 对于其他布局或者自定义布局，恐怕有什么办法可以避免节点重叠。

我已准备好进行数学计算，但你知道，如果我能从任何 d3 布局开始，那将是非常棒的。

有什么关于 d3 布局的建议吗？

任何帮助将不胜感激。 谢谢。

Answer 1

您可以将link distance 设置为强制布局中链接数据的函数。但是，这只是“理想”距离，实际距离会受到其他作用力的影响。为了使显示距离与理想距离紧密匹配，您还可以将链接强度设置为 1 -- 但即使如此，您也会获得一些“弹性”。

示例：http://jsfiddle.net/cSn6w/15/

var force = d3.layout.force()
    .on("tick", tick)
    .charge(-80)
    .linkDistance(function(d){return d.target.dist * 100;})
    .linkStrength(1)
    .friction(0.95)
    .size([w, h]);