在D3中動畫包裝文本

Question

嗯。 現在，我已經弄清楚了如何使用TSPAN動態包裝SVG文本（請參閱SVG文本中的自動換行 ），嘗試設置動畫效果使我感到困惑。 我以Mike Bostock的Zoomable Treemap示例為基礎。

我的文本換行代碼因此被調用：

    g.append("text")
     .attr("dy", ".75em")
     .text(function(d) { return d.name; })
 //  .call(text)                // Mike's line
     .each(function (d,i) {     // My line
         wraptorect(this,this.previousSibling,6,2,2);
     });

將舊的Mike行放回原處很好，但是刪除了自動換行：

function text(text) {
  text.attr("x", function(d) { return x(d.x) + 6; })
      .attr("y", function(d) { return y(d.y) + 6; });
}

我以為您只需要為父TEXT元素設置動畫，但是我正在Chrome中使文本朝着怪異的方向移動（甚至在IE9中，文本還不想換行的行為更糟​​）。 我懷疑這與具有x屬性的TSPAN有關，但除此之外看不到前進的方向...

單線

<text dy=".75em" x="252" y="2">Other purposes which could be interesting</text>

包裝線

<text dy=".75em" x="252" y="2">
  <tspan x="252" dy="15">Other purposes </tspan>
  <tspan x="252" dy="15">which could be </tspan>
  <tspan x="252" dy="15">interesting </tspan>
</text>

JS代碼很長，因此這里是小提琴鏈接： http : //jsfiddle.net/gHdR6/6/

Answer 1

如果TSPAN的位置是絕對的（即，它們具有x和/或y屬性），則不能通過移動父TEXT來移動。 您可以（a）相對放置它們（使用dx和dy），或者（b）通過使用TEXT或包裝器G上的轉換來移動整個文本塊。我發現IE和Chrome呈現字體寬度的方式不一致，因此使用（b）效果良好。

有關更新的演示，請參見http://jsfiddle.net/gHdR6/15/ 。 這是有效的SVG結構：

<text transform="translate(772,439)">
    <tspan x="0" dy="15">Transport and </tspan>
    <tspan x="0" dy="15">communication </tspan>
</text>

然后，您的縮放（或動畫）代碼需要更新這些節點的轉換，而不是x和y。