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

Question

我正在尝试绘制一个矩形形状，我可以在其中将一些数据放入 d3 树状图中。但我不确定我该怎么做。我在这里有初始的 plunkr：http://plnkr.co/edit/AoqY1xoRlwyK3VAxYuhz?p=preview 这是我知道我可以为附加文本做的事情：

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

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

任何人都可以在这里帮助我或指出一些我可以参考的文档。

Answer 1

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

var nodeRect = nodeEnter.append("rect")
      .attr("height", 14)
      .style("fill", "dodgerblue")
      .attr("rx", 4)
      .attr("ry", 4)
      .attr("y", -7);

然后，文本选择为created/appended后，计算文本的长度。我在这里使用 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
    });

这是您更新的 Plunker：http://plnkr.co/edit/a32rYZT6cSZ0c5zQrC6W?p=preview

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

draw a rectangle with custom texts around an image in d3 dendrogram

javascript

svg

dendrogram

d3.js