Text 在d3中设置包装文本的动画

嗯，现在我已经知道了如何使用TSPANs动态包装SVG文本（请参阅），尝试对其进行动画制作让我感到困惑。我是基于Mike Bostock的可缩放树形图示例

我的文本包装代码被调用，因此：

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

我原以为你只需要给父文本元素设置动画，但我在Chrome中看到文本在奇怪的方向上移动（在IE9中更糟糕的是，文本还不想换行）。我怀疑这与具有x属性的TSPANs有关，但看不到除此之外的前进方向

单行

<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代码相当长，因此这里有一个fiddle链接：

如果TSPAN是绝对定位的（即，它们具有x和/或y属性），则无法通过移动父文本来移动。您可以（a）相对地定位它们（使用dx和dy），或者（b）通过对文本或包装器G进行转换来移动整个文本块。我发现IE和Chrome如何呈现字体宽度不一致，因此使用（b）效果良好

有关更新的演示，请参阅。以下是工作正常的SVG结构：

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

运输及
沟通

---

然后，您的缩放（或动画）代码需要更新这些节点的平移，而不是x和y。

您的目标是什么？在JSFIDLE中，文本元素的位置似乎根本没有动画效果。我的目标是这种行为：（我不能在我的原始问题中包含第三个链接。）您是否尝试过像该示例中那样转换

文本

元素？如果

text

s包含

tspan

s，则不需要更改任何内容。代码是否按照您的建议进行了更新。第339-344行和第373-376行已注释/未注释。问题在于TSPAN是从存储在“root”中的（模拟的）JSON动态构建的。我把每个框中的文字都加长了，这样你可以更清楚地看到（缺少）包装。我明白了。不确定问题出在哪里——包装文本的函数相当长。你考虑过使用吗？