Javascript 围绕d3树状图中的图像绘制一个带有自定义文本的矩形

我试着画一个矩形，在那里我可以在d3树状图中拟合一些数据。但我不确定我怎么能做到这一点。我在这里有可用的初始PRUNKR： 以下是我知道我可以做的附加文本：

  nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6);

基本上我想在每个节点周围画一个这样的形状：

---

有人能帮我吗，或者给我指一些我可以参考的文档。

这里已经有了组元素。也就是说，您所需要的只是附加您的矩形（不要介意这里的幻数，您可以稍后更改它们）：

然后，在创建/添加文本选择后，计算文本的长度。这里我使用

this.nextSibling.nextSibling

，因为我知道文本相对于矩形的位置：

nodeRect.attr("width", function(d) {
        return this.nextSibling.nextSibling.getComputedTextLength() + 30
    })
    .attr("x", function(d, i) {
        return d._children || d.depth === 0 ? -(this.nextSibling.nextSibling.getComputedTextLength() + 14) : -14
    });

---

这是您的最新装备：

谢谢D3大师。你很和蔼。你的回答几乎解决了我的问题。

nodeRect.attr("width", function(d) {
        return this.nextSibling.nextSibling.getComputedTextLength() + 30
    })
    .attr("x", function(d, i) {
        return d._children || d.depth === 0 ? -(this.nextSibling.nextSibling.getComputedTextLength() + 14) : -14
    });