2

回転と組み合わせたトランジションは、奇妙な結果をもたらします。

これが私の問題のフィドルです: http://jsfiddle.net/emperorz/E3G3z/1/ 各四角をクリックして、さまざまな動作を確認してください。

ハッキングされたコードを許してください。ただし、回転 (および x/y 配置) で遷移を使用すると、ループします。

私が試してみました：

1）すべて変換（回転してから平行移動）で、ほとんど問題ないようです。少しグラグラ。

2）x / y属性を使用して配置された変換で回転するだけです。あちこち飛び回るが、最終的には正しい場所にたどり着く。とても奇妙です。

3) すべて変換 (移動してから回転) で、飛び去り、(完全に) 間違った場所に行き着きます。

うーん。変。

トランジションで形状を回転させる正しいアプローチはありますか?

直感的には、2 番目のオプションが機能するのは良いことです。

ありがとう

4

2 に答える 2

6

translateSVG オブジェクトを任意の軸で回転するには、(軸を設定する) と の2 つの変換が必要ですrotate。あなたが本当に望むのは、translate最初に完全に適用してから、すでに移動した要素を回転させることですが、それは独立して同時に動作するようですtranslate。rotateこれは適切な場所で終了しますが、アニメートするtranslateと、基本的に回転中に軸が移動し、ぐらつきが生じます。を SVG 要素階層内の別々の場所に出現させることで、translateを から分離できます。rotateたとえば、次を見てください。

<g class="outer">
    <g class="rect-container">
        <rect class="rotate-me" width=200 height=100 />
    </g>
</g>

<rect>で (0,0) を中心にできますtranslate (-100, -50)。要素に回転を適用するとぐらつきますが、要素を適用する<rect>ときれいに回転します。要素をさらに再配置、スケーリング、またはその他の方法で変換する場合は、 に進みます。それでおしまい。これで、変換を完全に制御できます。rotateg.rect-containerg.outer

<rect>の中心を見つけるのは簡単ですが、 、 などの中心を見つけるのは<path>はるか<g>に困難です。幸いなことに、.getBBox()メソッドで簡単な解決策を利用できます (CoffeeScript のコード。JavaScript バージョンについては以下を参照してください*)。

centerToOrigin = (el) ->
    boundingBox = el.getBBox()
    return {
        x: -1 * Math.floor(boundingBox.width/2),
        y: -1 * Math.floor(boundingBox.height/2) 
    }

ラップされていない要素を渡すことで、要素/グループを中央に配置できるようになりました (D3 の.node()メソッドを使用) 。

group = d3.select("g.rotate-me")
center = centerToOrigin(group.node())
group.attr("transform", "translate(#{center.x}, #{center.y})")

<rect>a singleと <g>of of 2rectの両方で再配置とスケーリングを使用してこれを実装するコードについては、この fiddle を参照してください。

*上記コードの Javascript:

var center, centerToOrigin, group;

centerToOrigin = function(el) {
  var boundingBox;
  boundingBox = el.getBBox();
  return {
    x: -1 * Math.floor(boundingBox.width / 2),
    y: -1 * Math.floor(boundingBox.height / 2)
  };
};

group = d3.select("g.rotate-me");
center = centerToOrigin(group.node());
group.attr("transform", "translate(" + center.x + ", " + center.y + ")");
于 2013-02-14T20:59:33.283 に答える
0

iirc translate は 0,0 に相対的ですが、rotate はオブジェクトの中心点を中心にしています。

そのため、シェイプは 0,0 (100,200、または 200,100 など) からオフセットされているため、変換すると移行してしまいます。これは、Diamond3 のオフセットを [50,50] に変更することで確認できます。画面の移動ははるかに小さくなっています。

解決策は、0,0 ポイントをダイヤモンドの中心にリベースすることです。D3でこれを行う方法があります-しかし、頭のてっぺんからそれが何であるか思い出せません:(

于 2012-09-19T13:24:27.163 に答える