`d3-interpolate`の` interpolateTransformCss`、 `interpolateTransformSvg`を簡単な例で理解するには？

Question

私はsource codeをd3-interpolateと勉強しています。私はぼんやりと文書とsrcに従うことができるinterpolateTransformCssとinterpolateTransformSvg。

しかし、CSSの基本知識とSVGに関する知識がほとんどないため、いくつかのテスト例の助けを借りずにこれら2つの関数が正確に何を生成するのか分かりませんでした（ repoはこれら2つの関数のテスト例を提供しません）。

これらの2つの機能がどのように機能し、blockbuilder.orgに表示されているサンプルコードのように動作しようとしているのかを示す簡単な例はありますか？簡単affine transformation matrixで

おかげ

Answer 1

SVG要素がtransformプロパティを取ることができます。それは次のようになります。

<circle transfrom="translate(20, 10) rotate(30)" r="10" /> 

「X = 20 Y = 10に円を移動し、それを30度回転させる」ことを意味します。

インターポレーターはトランジションに役立ちます。あなたは

<circle transfrom="translate(30, 20) rotate(40)" r="10" /> 

のように、新しい位置と回転にその円を移行するのであれば、その後補間が必要とされています。 d3トランジションは自動的にそれを行いますが、補間オブジェクトはエクスポーズされており、ユースケースの必要に応じて独自の補間を行うことができます。したがって、このようになります。そのサークルのためのインターポレータを作成：D3インターポレータが、それは3つの数字を補間する必要があることを検出します

var myInterpolator = d3.interpolateTransformSvg(
    "translate(20, 10) rotate(30)", 
    "translate(30, 20) rotate(40)" 
) 

こと：それに基づいて20、10および30を、ここであなたが得るだろうかです：

myInterpolator(0); // returns "translate(20, 10) rotate(30)" 
myInterpolator(1); // returns "translate(30, 20) rotate(40)" 
myInterpolator(0.5); // returns "translate(25, 11) rotate(35)" 

e最後の例では、同じことをするが、SVGと同じ目的を果たすCSS変換、で変換が、非SVGにstyleを介して適用され、適切な0と1

d3.interpolateTransformCssの中間（方法0.5）を形質転換を返しますやや異なる形式を持っています。

Answer 2

意味の遷移（状態Aから状態Bへの内挿）のために適切な方法でモーフィング可能ではありません。

レッツは、我々は1を回転する変換する必要がある最初の恒等変換行列を持っていると言う：

アニメーション回転を使用すると、個別行列の各成分の角度をアニメーションではなく、する必要があるということです。だから行列の遷移の正しい方法はdecompose it to four basic operationsです：平行移動、回転、せん断、スケール。これらの独立した変換を持つことで、それらを独立して意味のあるものに変え、それらを組み立てて（乗算して）最終的な単一の変換マトリックスにすることができます。

最後のmatrix()の代わりにd3コードがrotate(),translate()などの操作を単純に作成しているようです。

チェック：https://www.w3.org/TR/css-transforms-1/#interpolation-of-2d-matrices