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）。

然後，我們這個數據綁定到文本：

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/