在d3中动画包装文本答案

【问题标题】：Animating wrapped text in d3在d3中动画包装文本
【发布时间】：2014-04-09 08:21:52
【问题描述】：

嗯。既然我已经弄清楚了如何使用 TSPAN 动态地包装 SVG 文本（请参阅 Auto line-wrapping in SVG text），但尝试对其进行动画处理让我很难过。我基于 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/

【问题讨论】：

你的目标是什么？在您的 jsfiddle 中，文本元素的位置似乎根本没有动画效果。
嗨，拉斯。我的目标是这种行为：bost.ocks.org/mike/treemap（我的原始问题中无法包含第三链接。）
您是否尝试过像该示例那样转换text 元素？如果texts 包含tspans，则无需更改任何内容。
jsfiddle.net/gHdR6/8 是按照您的建议更新的代码。第 339-344 和 373-376 行已注释/未注释。问题是 TSPAN 是从存储在“根”中的（模拟的）JSON 动态构建的。我已将每个框中的文本加长，以便您可以更清楚地看到（缺少）环绕。
我明白了。不知道问题出在哪里——你的文本换行函数很长。您是否考虑过使用this (simpler) example？

标签： text svg d3.js zooming tspan

【解决方案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。

【讨论】：