D3将文本添加到矩形

Question

是否可以在D3树形图表中的多个矩形的中心添加一段文本？所以我所追求的是这样的：

正如您在图片中看到的那样，我希望文本在图表的每个“部分”（不同颜色）的中间出现一次。有可能用D3做到这一点吗？如果是这样，我将如何实现它。

目前，我已设法将其显示在每个矩形上，如下所示：

 cell.append("svg:text")
      .attr("x", function(d) { return d.dx / 2; })
      .attr("y", function(d) { return d.dy / 2; })
      .attr("dy", ".35em")
      .text("test")
       .style("opacity", function(d) { console.log(this.getComputedTextLength());d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; });

完整代码在此处：http://jsfiddle.net/noobiecode/9ev9qjt3/74/

任何帮助将不胜感激。

Answer 1

为了附加这些文本，我们首先需要找到相应的数据。现在，nodes有关于所有不同深度（父母和孩子）的数据，但对于这些文本，我们只需要第二深度的数据（深度== 2）。

所以，我们首先得到数据：

var parents = treemap.nodes(root)
    .filter(function(d) { return d.depth == 2 });

它为我们提供了一个包含三个对象的数组，因此我们的方法正确。这个数组（parents）具有我们放置文本所需的全部内容（x，y，dx，dy，name）。< / p>

然后，我们将这些数据绑定到文本：

var parentsText = svg.selectAll(".parentsText")
    .data(parents)
    .enter()
    .append("text");

之后，我们附上文本：

parentsText.attr("text-anchor", "middle")
     .attr("dominant-baseline", "central")
     .attr("x", function(d){ return d.x + d.dx/2})
     .attr("y", function(d){ return d.y + d.dy/2})
     .text(function(d){ return d.name})
     .attr("class", "parentText");

这就是由此产生的小提琴：http://jsfiddle.net/gerardofurtado/9ev9qjt3/94/

您还可以为每个单独的矩形和组提供文本（但在这种情况下，您可能希望移除一些重叠的文本）：http://jsfiddle.net/gerardofurtado/9ev9qjt3/95/