javascript - D3.js 中可折叠树中的链接

Question

我是 D3 新手，所以我想在这个树形布局示例中弄清楚以下一些内容( http://bl.ocks.org/mbostock/4339083 )。

1. 如何将名称添加到链接(边缘)，即如果存在从 A 到 B 的链接(B 是 A 的子级)，然后在链接上显示 B 的名称。
2. 如何根据 child 中给定的大小更改链接的宽度，即如果有一个从 A 到 B 的链接，并且 B 的大小为 50，则链接的宽度应为 50px。

请帮助我解决这些问题，因为我无法理解它的完成方式。

谢谢。

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; });

您可能想要调整标签位置。

要改变链接的宽度，需要设置路径的行程宽度属性:

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});
  });