Question

（d3肯定会产生很多问题）

我正在尝试修改Mike的可缩放树形图（http://bost.ocks.org/mike/treemap/），以便在每个父母的中心显示值字段。 RECT。这是我的新代码，它工作得很好......直到我放大：

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

有人知道我需要更改什么才能让overlayidText节点在缩放（进出）时表现？

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

d3 zoomable treemap - 在正确的位置添加新标题

1 个答案: