d3-transition

トランジションは、DOMへの変更をアニメーション化するためのセレクションのようなインターフェースです。変更を即座に適用するのではなく、トランジションは指定された期間にわたって、現在の状態から目的のターゲット状態までDOMをスムーズに補間します。

トランジションを適用するには、要素を選択し、selection.transitionを呼び出し、次に必要な変更を加えます。例：

d3.select("body")
  .transition()
    .style("background-color", "red");

トランジションは、ほとんどのセレクションメソッド（例えば、transition.attrとtransition.styleを、selection.attrとselection.styleの代わりに使用）をサポートしますが、すべてのメソッドがサポートされているわけではありません。たとえば、トランジションを開始する前に要素を追加したり、データをバインドしたりする必要があります。transition.remove演算子は、トランジションが終了したときに要素を便利に削除するために提供されています。

中間状態を計算するために、トランジションはさまざまな組み込みの補間を活用します。色、数値、および変換は自動的に検出されます。多くのスタイル（パディングやフォントサイズなど）やパスで一般的なように、数値が埋め込まれた文字列も検出されます。カスタム補間を指定するには、transition.attrTween、transition.styleTween、またはtransition.tweenを使用します。

以下のいずれかを参照してください

• 要素の選択
• 要素の変更
• タイミング
• 制御フロー