javascript - D3 adding text to a rectangle -

is possible add piece of text in centre of multiple rectangles in d3 treemap chart? i'm after this:

as can see picture, want have text appear once in middle of each “section” (different colours) on chart. possible d3? if how achieve it.

currently i've managed have appear on each individual rectangle, 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; }); 

full code here: http://jsfiddle.net/noobiecode/9ev9qjt3/74/

any appreciated.

for appending these texts, first need find corresponding data. right now, nodes have data regarding different depths (parents , children), these texts need data second depth (depth == 2).

so, first data:

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

it gives array 3 objects, in right way. array (parents) have need position texts (x, y, dx, dy, name).

then, bind data texts:

var parentstext = svg.selectall(".parentstext")     .data(parents)     .enter()     .append("text"); 

after that, append texts:

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

and resulting fiddle: http://jsfiddle.net/gerardofurtado/9ev9qjt3/94/

you can have texts each individual rectangle , group (but, in case, may want move away overlapping texts): http://jsfiddle.net/gerardofurtado/9ev9qjt3/95/