3

D3 の transform 属性と transition メソッドを使用して、SVG 形状を回転させようとしています。例を含む jsfiddle を次に示します: http://jsfiddle.net/TJd2a/

左と右の 2 つのボタンを使用して、角度を 45 度または -45 度ずつ増やして四角形を回転させます。形状が 180 度または -180 度に達すると、トランジションは形状を次の角度に直線的に移動するのではなく、反対方向に回転させます。コンソール ロギングを使用して、コードが生成している角度に問題がないことがわかりました。生成された XML が現在と同じ角度を示していないため、D3 がトランジションを処理しているように見えます (たとえば、225 度の場合、D3 は代わりに長方形に -135 の回転を与えます)。

ドキュメントを読んで理解したことから、カスタム Tween を使用する必要がありますが、どのように機能するかを理解するのに役立つ具体的な例や類似の例が見つからないため、カスタム トゥイーンをどこから始めればよいかわかりません。 .

4

1 に答える 1

6

正しい; カスタムトゥイーンを使用して補間器を変更できます。D3 にはtransforms 用の特別な補間器がありますが、あなたの場合は正しいことをしていません。(これはおそらく修正すべきバグだと思うので、問題 661を提出しました。)代わりにinterpolateStringを使用した例を次に示します。

d3.select("rect").transition().attrTween("transform", function(d) {
  return d3.interpolateString(
    "rotate("+ d.a +")",
    "rotate(" + (d.a += 45) + ")"
  );
});
于 2012-05-31T17:13:53.630 に答える