D3布局：树状结构，但链接长度不同 [英] D3 Layout : Tree-like Structure, but link length varies

问题描述

我有非常有趣的布局问题。

I am having very interesting layout problem.

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

I have football match data, particularly the number of successful passes been made between the players and the captain of the team. We don't care about the passes made between the players who are not the captain of the team.

所以根节点将是队长，每个叶将提出每个球员并且我们将要拥有的所有链接只是根节点和每个叶节点之间的链接。没有叶子之间的链接。

So the root node will be Captain, each leaf will present each player and all the links we are going to have is just the ones between root node and every leaf node. No links between leaves.

我希望根节点位于图表的中心，并根据船长和玩家之间成功通过的次数，我们将决定根节点和叶之间的链路长度。

I would like the root node sit at the center of the diagram, and based on the number of successful passes been made between the captain and the player, we will decide the link length between root node and leaf. The more passes been made, the longer the link will be.

我试图使用d3强制布局，因为我不想让播放器节点重叠一个超过另一个。
我有这个方法的几个问题。我有的主要问题和我为什么在这里的原因是力布局似乎不允许我有不同的节点之间的链接长度。
对于其他布局或自定义布局，恐怕是否有任何方式避免重叠节点。

I was tempted to use d3 force layout for this as I don't want the player nodes to overlap one over another. I have a few problems with this approach. The main problem I have and the reason why I am here is that the force layout doesn't seem to allow me to have different link lengths between nodes. For other layout or custom layout, I am afraid whether there is any way to avoid overlapping nodes.

我已准备好进行数学计算，但你知道，

I am ready for Math calculations, but you know, as always it would be great if I can start from any d3 layout.

任何关于d3布局的建议我从头开始？

Any suggestion about d3 layout for me to start with?

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

Any help would be appreciated. Thanks.

推荐答案

您可以设置链接距离作为强制布局中的链接数据的函数。然而，这只是理想距离，实际距离将受到工作中的其他力量的影响。为了使显示距离与理想距离接近，您还可以将链接强度设置为1 - 但即使这样，您也会得到一些弹性。

You can set the link distance as a function of the link data in a force layout. However, that will only be the "ideal" distance, and the actual distance will be affected by the other forces at work. In order to make the display distance closely match the ideal distance, you can also set the link strength to be 1 -- but even then you'll get some "springiness".

示例： 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]);

这篇关于D3布局：树状结构，但链接长度不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！