D3可缩放的树形图 - 在正确的地方

Question

添加新标题（D3肯定产生很多问题）

我想，这样的值字段显示在每个“中心修改Mike的可缩放的树形图（http://bost.ocks.org/mike/treemap/）父母“。这里是我的正常工作新的代码......直到我放大：

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

这里是活的（碎）代码：http://democra.me/treemap.htm

有谁知道我需要改变以获得overlaidText节点行为whe n放大（进出）？

Answer 1

以下是updated fiddle，其中包含以下更改。这是你想要的？

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