D3 Layout : Tree-like Structure, but link length varies

Question

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.

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.

Any suggestion about d3 layout for me to start with?

Any help would be appreciated. Thanks.

Answer 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".

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