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

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放大（進出）？

來源

2014-04-02 MSC

您是否還在onclick事件監聽器（即'transition'函數）中應用文本居中？ – FernOfTheAndes

我相信我是行（265-269）抓住g1（父組）中的所有文本節點： t1.selectAll（「text」）。call（text）.style（「fill-opacity」，0 ）; 等 – MSC

它可能是值得生成一個小提琴......讓其他人更容易發現問題和幫助。 – FernOfTheAndes

以下是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);

來源

2014-04-04 09:51:19 FernOfTheAndes

絕對！偉大的東西，謝謝@FernOfTheAndes。我仍然需要擺弄更多，但現在在正確的軌道上。 – MSC

非常好！很高興它解決了。 – FernOfTheAndes

D3可縮放的樹形圖 - 在正確的地方

回答

相關問題