2

うーん。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/

4

1 に答える 1

3

TSPAN が絶対的に配置されている (つまり、x および / または y 属性を持っている) 場合、親の TEXT を移動しても移動できません。(a) それらを相対的に配置する (dx と dy を使用)、または (b) TEXT の変換またはラッパー G を使用してテキスト ブロック全体を移動することができます。 (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 の代わりにこれらのノードの変換を更新する必要があります。

于 2014-04-09T00:21:52.370 に答える