d3 zoomable treemap - adding new captions in the right place

Question

(d3 sure generating lots of questions)

I am trying to modify Mike's zoomable treemap (http://bost.ocks.org/mike/treemap/) so that the value field is displayed in the centre of each 'parent' rect. Here's my new code which works fine... until I zoom in:

CSS

.overlaidText   {
    font-size: 2.2em;
    text-anchor: middle;
    fill: white;
    fill-opacity: 0.8;
    stroke: black;
    stroke-width: 1px;
    stroke-opacity: 0.5;
}

JS

    g.append("text")
      .classed("overlaidText",true)
      .text(function(d) { return Math.round(d.value)+"M"})
      .call(middletext);

    function middletext(text) {
      text.attr("x", function(d) { return x(d.x + d.dx / 2); })
          .attr("y", function(d) { return y(d.y + d.dy / 2) + 16; });
    }

Here is the live (broken) code: http://democra.me/treemap.htm

Does anyone know what I need to change to get the overlaidText nodes to behave when zooming (in and out)?

Answer 1

Here is the updated fiddle with the changes below. Is this what you are looking for?

// Transition to the new view.
t1.selectAll("text").call(text).style("fill-opacity", 0);
t2.selectAll("text").call(text).style("fill-opacity", 1);
t2.selectAll(".overlaidText").call(middletext).style("fill-opacity", 1); // added
t1.selectAll("rect").call(rect);
t2.selectAll("rect").call(rect);