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

LINKS IN Collapsible Tree in D3.js

本文关键字：链接 可折叠 js D3      更新时间：2023-09-26

我是D3的新手，所以我想在这个树布局示例中了解以下内容(http://bl.ocks.org/mbostock/4339083)。

  1. 如何将名称添加到链接（边），即如果有从a到B的链接（B是a的子级），则在链接上显示B的名称
  2. 我如何根据child中给定的大小更改链接的宽度，也就是说，如果有一个从a到B的链接，并且B的大小是50，那么链接的宽度应该是50px

请帮我解决这些问题，因为我不明白该怎么做。

谢谢。

对于标签，您需要将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});
  });
相关文章：