向矩形添加文本

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 拥有所有不同深度（parents 和 children）的数据，但对于这些文本，我们只需要第二个深度（深度 == 2）的数据。

所以，我们先获取数据：

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

它给了我们一个包含三个objects的数组，所以我们走对了。这个数组 (parents) 拥有我们定位文本 (x、y、dx、dy、name) 所需的一切。

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

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

这是结果 fiddle：http://jsfiddle.net/gerardofurtado/9ev9qjt3/94/

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

向矩形添加文本

Adding text to a rectangle

javascript

d3.js

position

treemap