Question

嗯。现在我已经弄清楚如何使用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);
     });

将旧的迈克线放回去工作正常，但删除文字换行：

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。

在d3中动画包装的文本

1 个答案: