在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。