ССЫЛКИ В Складной Дерево в D3.js

Question

Я новичок в D3, поэтому я хочу выяснить некоторые из следующих вещей в этом примере макета дерева (http://bl.ocks.org/mbostock/4339083).

1. Как добавить имена к ссылкам (ребрам), которые есть, если есть ссылка от A до B (B является дочерним по A), тогда отобразите имя B по ссылке.
2. Как изменить ширину ссылки в зависимости от размера, указанного в дочернем элементе, то есть, если есть ссылка от A до B, а размер B равен 50, тогда ширина ссылки должна быть 50 пикселей.

Пожалуйста, помогите мне решить эти проблемы, поскольку я не могу понять, как это должно быть сделано.

спасибо.

Answer 1

Для меток, вам необходимо добавить text элементы к дорожкам линии связи:

link.enter().insert("text", "g") 
    .attr("x", function(d) { return (d.source.x+d.target.x)/2; }) 
    .attr("y", function(d) { return (d.source.y+d.target.y)/2; }) 
    .text(function(d) { return d.target.name; }); 

Вы можете настроить позиции на этикетке.

Чтобы изменить ширину линии, вам необходимо установить атрибут stroke-width пути:

link.enter().insert("path", "g") 
    .attr("class", "link") 
    .attr("stroke-width", function(d) { return d.target.size; }) 
    .attr("d", function(d) { 
    var o = {x: source.x0, y: source.y0}; 
    return diagonal({source: o, target: o}); 
    });