javascript - D3 布局 : Tree-like Structure, 但链接长度不同

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]);