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

【问题标题】：LINKS IN Collapsible Tree in D3.jsD3.js 中的可折叠树中的链接
【发布时间】：2013-07-06 14:31:13
【问题描述】：

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

如果有从 A 到 B 的链接（B 是 A 的子级），我如何向链接（边）添加名称，然后在链接上显示 B 的名称。
如何根据 child 中给定的大小更改链接的宽度，即如果有从 A 到 B 的链接并且 B 的大小为 50，则链接的宽度应为 50px。

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

谢谢。

【问题讨论】：

标签： javascript arrays tree d3.js

【解决方案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});
  });

【讨论】：

感谢您的回答。但是标签的定位存在问题。要删除它，我们必须用 y 替换 x。如果完成此更改，则该位置正好在链接上。这里的另一个问题是一旦形成标签.. 在形成新标签时，旧标签不会被移除。我已经尝试使用 remove() 函数来删除文本，但它不起作用。你能调查一下吗？？
正如我所说，您可能需要调整标签位置。这应该是相当简单的。除非你给我看你用来删除标签的代码，否则我真的帮不了你。
var linktext = svg.selectAll("text.link") .data(links, function(d) { return d.target.id; }); linktext.enter().append("text", "g") .attr("x", function(d) { return (d.source.y + d.target.y) / 2; }) .attr( "y", function(d) { return (d.source.x + d.target.x) / 2; }) .attr("text-anchor", "middle") .text(function(d) { return d.target.size; }); linktext.exit().transition() .duration(duration) .text(function(d) { return d.target.size; }) .remove();
您是否将link 类分配给text 元素？
是的，我已经分配了班级并且也很累没有这样做也......但问题没有改变。