d3 translateでトランジション順の回転

Question

d3トランジションでプレイしようとしています。私はトランジションとローテーションの両方を行う必要があります。 私は元の座標を持っています：

let data = [ 
    {x: 100, y: 100, rotation: 45}, 
]; 

と2つの長方形。 1つは翻訳を最初に行い、もう1つは回転を 最初に実行しています。

これは、四角形を描画した後変換結果されています、彼らは同じ翻訳し、回転変換を持っている

transform="rotate(45 115 105) translate(100, 100)" 
transform="translate(100, 100) rotate(45 115 105)" 

異なり唯一のものは、それらのオーダーです。

その後、私はデータを変更します

transform="rotate(90 145 125) translate(130, 120)" 
transform="translate(130, 120) rotate(90 145 125)" 

しかし、私が本当に取得すると、このです：

data[0].x += 30; 
data[0].y += 20; 
data[0].rotation += 45; 

と私はいくつかの遷移がこの変換で終わる得ることを期待する

transform="translate(150, 110) rotate(90)" 
transform="translate(400, 100) rotate(90)" 

• 通知の順序が変更されます。最初の矩形に対して回転します。
• また、回転変換から回転中心を削除します（移行中に何らかの形で計算しますか？）
• 結果の数値はどのように取得されますか？

d3移行はどのように機能しますか？私はいくつかのより進歩したトランジションでプレイしようとしているので、期待できる結果を得る必要があります。ここで

は簡単な例です：https://jsfiddle.net/pp6npw4g/2 （遷移を開始するために移動をクリック）

Answer 1

これはtransform属性の値のD3の標準的な補間のための正常な動作です。 transform属性は、その値に任意の順序で出現し、1つのリスト内に複数回出現する可能性のある変換定義の複雑なリストが含まれている可能性があるため、変わりにくいことはよく知られています。たとえば：

transform="translate(100) rotate(30, 100, 100) scale(2.5) translate(-10, -50) skewX(20)" 

は、これらの値の間で移行できるようにするには、それはtransform属性の値を補間することになると、transition.attr()機能はd3.interpolateTransformSvg(a, b)を使用しています。

1. モジュール変換定義のリストは、インタフェースSVGTransformListの.consolidate()を呼び出すことで煮詰めているD3-補間の内部機能parseSvg()の中で：これは、次のことを行います。この変換連結プライベート関数decompose()を使用して

2. は、その後、回転、スキューと規模を翻訳ために、その値に分解されます。

私はanswer"Replacing d3.transform in D3 v4"にして変換リストを分解するこのプロセスを説明してきました。 d3.interpolateTransformSvg(a, b)によって返される補間は、その後のためaとbのそれぞれの値の間を補間します遷移中

（1）translate、（2）rotate、（3）skewX及び（4）まさにこのorderでscale。

これにより、統合された値が残されます。これは、最初は予期せぬものになる可能性があります。さらに、なぜ変遷の順序が変遷によって変わったのかを説明しています。これを回避してカスタムトランジションを実装するには、transition.attrTween()を呼び出して割り当てることができるカスタムトゥイーン関数を用意する必要があります。この関数の実装は、あなたのニーズに大きく依存しますが、この答えの範囲を超えています。