13

D3.jsライブラリを使用して回転アニメーションを正しく実行しようとすると問題が発生します。問題は、要素を回転させたいポイントに関係しています。

これが私が意味することを示すために作ったフィドルです（スローモーションで）：http：//jsfiddle.net/74mCb/

問題の原因はここにあるようです：

.attr("transform", "rotate(-60, 150,130)");

そして、私はそれを次のように回転させます：

.attr("transform", "rotate(40 150,130)");

針の尻を（回転の中心になるように）所定の位置に留めておきたいのですが、誰かが私が間違っていることを説明してもらえますか？

ありがとう！

4

2 に答える 2

28

これを理解するのは少し難しいですが（私自身は完全には理解していません）、D3には、回転を表す2つの文字列の間を補間する方法を知るための支援が必要です。

function turnNeedle()
{

    needle
      .transition()
      .duration(2000)
      .attrTween("transform", tween);

    function tween(d, i, a) {
      return d3.interpolateString("rotate(-60, 150, 130)", "rotate(60, 150, 130)");
    }

}

dはデータム、iはインデックス、aはこれをデータ駆動型にする場合の属性です。

http://jsfiddle.net/SHF2M/

于 2012-11-09T18:57:47.740 に答える
11

これが私が起こっていると思うことです：SVG仕様に従って、変換

rotate(40 150,130)

と同等です：

translate(150,130) rotate(40) translate(-150, -130)

D3は、回転だけでなく平行移動もアニメートしているようです。の内部d3.transform表現rotate(40 150,130)は、回転コンポーネント+平行移動コンポーネントであるため、両方がトランジションに含まれています。

ここでの最も簡単な修正は、原点に針を描き、外側のg要素を使用して針を正しい位置に移動してから、回転させることです。

var needle = svg
  .append("g")
    .attr("class", "needle")
    .attr("transform", "translate(150 , 130)")
  .append("path")
    .attr("class", "tri")
    // your path may have been prettier
    .attr("d", "M-3 0 L0 -130 L3 0 S3 5 0 5 S-3 5 -3 0 Z")
    .attr("transform", "rotate(-60)");

それから

needle
    .transition()
    .duration(2000)
    .attr("transform", "rotate(40)");

作業フィドルを参照してください：http：//jsfiddle.net/nrabinowitz/74mCb/1/

于 2012-11-09T19:11:53.933 に答える