D3 Макет: Деревоподобная структура, но длина ссылки варьируется

Question

У меня очень интересная проблема размещения.

У меня есть данные футбольного матча, в частности количество успешных проходов между игроками и капитаном команды. Мы не заботимся о проходах между игроками, которые не являются капитаном команды.

Таким образом, корневой узел будет капитаном, каждый лист будет представлять каждого игрока, и все ссылки, которые у нас будут иметь, - это только те, которые находятся между корневым узлом и каждым листовым узлом. Никаких связей между листьями.

Я хотел бы, чтобы корневой узел находился в центре диаграммы, и в зависимости от количества успешных проходов между капитаном и игроком мы определяем длину связи между корневым узлом и листом. Чем больше проходов было сделано, тем дольше будет ссылка.

У меня возникло искушение использовать схему силы d3 для этого, так как я не хочу, чтобы узлы игроков перекрывались друг над другом. У меня есть несколько проблем с этим подходом. Основная проблема, с которой я столкнулась, и причина, по которой я здесь, заключается в том, что макет силы не позволяет мне иметь разные длины ссылок между узлами. Для другого макета или пользовательского макета, я боюсь, есть ли способ избежать перекрытия узлов.

Я готов к вычислениям в Math, но вы знаете, как всегда было бы здорово, если бы я мог начать с любой макеты 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]);