制御フロー

高度な使用方法では、トランジションはカスタム制御フローの方法を提供します。

トランジションのライフサイクル

トランジションを作成した直後（例：selection.transitionまたはtransition.transitionなど）は、transition.delay、transition.duration、transition.attr、transition.styleなどのメソッドを使用してトランジションを構成できます。ターゲット値を指定するメソッド（transition.attrなど）は同期的に評価されますが、補間のために開始値を必要とするメソッド（transition.attrTweenやtransition.styleTweenなど）は、トランジションが開始されるまで遅延する必要があります。

作成後すぐに、現在のフレームの終わりまたは次のフレーム中に、トランジションがスケジュールされます。この時点で、delayとstartイベントリスナーは変更できなくなります。変更しようとすると、「too late: already scheduled」（またはトランジションが終了している場合は「transition not found」）というメッセージのエラーが発生します。

その後、トランジションが開始されると、同じ要素にある同じ名前の有効なトランジション（もしあれば）を中断し、登録されたリスナーにinterruptイベントをディスパッチします。（中断は開始時に行われ、作成時ではないことに注意してください。そのため、0遅延のトランジションでも有効なトランジションをすぐに中断することはありません。古いトランジションには最終フレームが与えられます。selection.interruptを使用してすぐに中断します。）開始トランジションは、開始トランジションの前に作成された、同じ要素上の同じ名前の保留中のトランジションもすべてキャンセルします。その後、トランジションは登録されたリスナーにstartイベントをディスパッチします。これはトランジションを変更できる最後の瞬間です。トランジションの実行中は、トランジションのタイミング、トゥイーン、リスナーを変更できません。変更しようとすると、「too late: already running」（またはトランジションが終了している場合は「transition not found」）というメッセージのエラーが発生します。トランジションは開始直後にトゥイーンを初期化します。

トランジションが開始するフレーム中ですが、そのフレームで開始されたすべてのトランジションが開始された後、トランジションは初めてトゥイーンを呼び出します。トゥイーンの初期化のバッチ処理（通常はDOMからの読み取りが含まれます）は、DOMの読み取りと書き込みのインターリーブを回避することにより、パフォーマンスを向上させます。

トランジションがアクティブである各フレームに対して、トランジションはイージングされたt値（0〜1の範囲）を使用してトゥイーンを呼び出します。各フレーム内では、トランジションは登録された順序でトゥイーンを呼び出します。

トランジションが終了すると、（イージングされていない）t値1でトゥイーンを最終的に呼び出します。その後、登録されたリスナーにendイベントをディスパッチします。これはトランジションを検査できる最後の瞬間です。終了後、トランジションは要素から削除され、その構成は破棄されます。（トランジションの構成は、中断またはキャンセル時にも破棄されます。）破棄された後にトランジションを検査しようとすると、「transition not found」というメッセージのエラーが発生します。

selection.interrupt(name)

ソース · 選択された要素上で指定されたnameのアクティブなトランジションを中断し、指定されたnameの保留中のトランジション（もしあれば）をキャンセルします。名前が指定されていない場合は、nullが使用されます。

要素のトランジションを中断しても、子要素のトランジションには影響しません。たとえば、軸トランジションは、軸G要素の子要素（ティック線、ティックラベル、ドメインパスなど）に対して複数の独立した同期トランジションで構成されます。軸トランジションを中断するには、そのため子要素を中断する必要があります。

selection.selectAll("*").interrupt();

ユニバーサルセレクタ*は、すべての子孫要素を選択します。G要素自体も中断したい場合は

selection.interrupt().selectAll("*").interrupt();

interrupt(node, name)

ソース · 指定されたnode上で指定されたnameのアクティブなトランジションを中断し、指定されたnameの保留中のトランジション（もしあれば）をキャンセルします。名前が指定されていない場合は、nullが使用されます。selection.interruptも参照してください。

transition.end()

ソース · 選択されたすべての要素がトランジションを完了したときに解決されるPromiseを返します。要素のトランジションがキャンセルまたは中断されると、Promiseは拒否されます。

transition.on(typenames, listener)

ソース · 指定されたイベントtypenamesに対して、選択された各要素にlistenerを追加または削除します。typenamesは、次のいずれかの文字列イベントタイプです。

• start - トランジションが開始されたとき。
• end - トランジションが終了したとき。
• interrupt - トランジションが中断されたとき。
• cancel - トランジションがキャンセルされたとき。

詳細はトランジションのライフサイクルを参照してください。これらはselection.onとselection.dispatchによって実装されているネイティブのDOMイベントではなく、トランジションイベントです！

型は、オプションでピリオド（.）と名前を続けることができます。オプションの名前を使用すると、start.fooとstart.barなど、同じタイプのイベントを受信するために複数のコールバックを登録できます。複数のtypenamesを指定するには、スペースでtypenamesを区切ります（例：interrupt endまたはstart.foo start.bar）。

選択されたノードで指定されたトランジションイベントがディスパッチされると、指定されたlistenerがトランジション中の要素に対して呼び出され、現在のデータム（d）、現在のインデックス（i）、現在のグループ（nodes）が渡され、thisは現在のDOM要素になります。リスナーは常に要素の最新のデータムを参照しますが、インデックスはセレクションのプロパティであり、リスナーが割り当てられたときに固定されます。インデックスを更新するには、リスナーを再割り当てします。

選択された要素で同じtypenameに対してイベントリスナーが以前に登録されていた場合、新しいリスナーを追加する前に、古いリスナーが削除されます。リスナーを削除するには、listenerとしてnullを渡します。特定の名前のすべてのリスナーを削除するには、listenerとしてnullを、.fooをtypenameとして渡します（ここでfooは名前です）。名前のないすべてのリスナーを削除するには、typenameとして.を指定します。

リスナーが指定されていない場合、選択された最初の（nullではない）要素（もしあれば）に対して、指定されたイベントtypenameに現在割り当てられているリスナーを返します。複数のtypenameが指定されている場合、最初に一致するリスナーが返されます。

transition.each(function)

ソースコード · 選択された各要素に対して指定されたfunctionを呼び出します。現在のデータ（d）、現在のインデックス（i）、現在のグループ（nodes）を引数として渡し、thisは現在のDOM要素になります。このメソッドは、選択された各要素に対して任意のコードを実行するために使用でき、親データと子データを同時にアクセスするためのコンテキストを作成するのに役立ちます。selection.each と同等です。

transition.call(function, ...arguments)

ソースコード · 指定されたfunctionを正確に1回呼び出します。このトランジションと任意のargumentsを渡します。このトランジションを返します。これは手動で関数を呼び出すことと等価ですが、メソッドチェーンを容易にします。たとえば、再利用可能な関数で複数の属性を設定する場合

function color(transition, fill, stroke) {
  transition
      .style("fill", fill)
      .style("stroke", stroke);
}

さて

d3.selectAll("div").transition().call(color, "red", "blue");

これは以下のものと等価です。

color(d3.selectAll("div").transition(), "red", "blue");

selection.call と同等です。

transition.empty()

ソースコード · このトランジションに（nullではない）要素が含まれていない場合、trueを返します。selection.empty と同等です。

transition.nodes()

ソースコード · このトランジション内のすべての（nullではない）要素の配列を返します。selection.nodes と同等です。

transition.node()

ソースコード · このトランジション内の最初の（nullではない）要素を返します。トランジションが空の場合は、nullを返します。selection.node と同等です。

transition.size()

ソースコード · このトランジション内の要素の総数を返します。selection.size と同等です。