D3 Text zu einem Rechteck hinzufügen

Question

Ist es möglich, ein Stück Text in der Mitte mehrerer Rechtecke in einem D3-Treemap-Diagramm hinzuzufügen? Also, was ich bin ist nach so etwas wie dieses:

Wie Sie dem Bild sehen kann, möchte ich Text haben scheinen einmal in der Mitte jeder „Abschnitt“ (verschiedene Farben) auf dem Chart . Ist es möglich, dies mit D3 zu tun? Wenn ja, wie würde ich es erreichen?

Zur Zeit habe ich es geschafft, es auf jedem einzelnen Rechteck erscheinen zu lassen, etwa so:

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

Voll Code ist hier: http://jsfiddle.net/noobiecode/9ev9qjt3/74/

Jede Hilfe wird geschätzt.

Answer 1

Zum Anhängen dieser Texte müssen wir zuerst die entsprechenden Daten finden. Im Moment haben nodes Daten über alle verschiedenen Tiefen (Eltern und Kinder), aber für diese Texte benötigen wir nur die Daten für die zweite Tiefe (Tiefe == 2).

So haben wir zunächst die Daten erhalten:

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

Es gibt uns ein Array mit drei Objekten, also sind wir in der richtigen Weise. Dieses Array (parents) enthält alles, was wir zur Positionierung der Texte benötigen (x, y, dx, dy, name).

Dann binden wir diese Daten an die Texte:

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

Danach, fügen wir die Texte:

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

Und das ist die resultierende Geige: http://jsfiddle.net/gerardofurtado/9ev9qjt3/94/

können Sie haben Sie auch die Texte für jedes einzelne Rechteck und für die Gruppe (aber in diesem Fall möchten Sie möglicherweise einige überlappende Texte entfernen): http://jsfiddle.net/gerardofurtado/9ev9qjt3/95/