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

i having interesting layout problem.

i have football match data, particularly number of successful passes been made between players , captain of team. don't care passes made between players not captain of team.

so root node captain, each leaf present each player , links going have ones between root node , every leaf node. no links between leaves.

i root node sit @ center of diagram, , based on number of successful passes been made between captain , player, decide link length between root node , leaf. more passes been made, longer link be.

i tempted use d3 force layout don't want player nodes overlap 1 on another. have few problems approach. main problem have , reason why here force layout doesn't seem allow me have different link lengths between nodes. other layout or custom layout, afraid whether there way avoid overlapping nodes.

i ready math calculations, know, great if can start d3 layout.

any suggestion d3 layout me start with?

any appreciated. thanks.

you can set link distance function of link data in force layout. however, "ideal" distance, , actual distance affected other forces @ work. in order make display distance closely match ideal distance, can set link strength 1 -- you'll "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]);