タイミング

トランジションのイージング、遅延、期間は設定可能です。例えば、要素ごとの遅延を使用することで、要素の並べ替えを段階的に行うことができ、知覚が向上します。統計データグラフィックスにおけるアニメーショントランジションを参照してください。

transition.delay(value)

ソースコード · 選択された各要素について、トランジションの遅延をミリ秒単位で指定されたvalueに設定します。

transition.delay(250);

valueは、定数または関数として指定できます。関数の場合は、選択された各要素について順番にすぐに評価され、現在のデータム(d)、現在のインデックス(i)、現在のグループ(nodes)が渡され、thisは現在のDOM要素になります。関数の戻り値を使用して、各要素のトランジション遅延が設定されます。遅延が指定されていない場合、デフォルトでゼロになります。

valueが指定されていない場合、トランジション内の最初の（nullでない）要素の遅延の現在の値を返します。これは、トランジションに正確に1つの要素が含まれている場合にのみ一般的に役立ちます。

transition.delay() // 250

インデックスiの倍数に遅延を設定することは、要素のセット全体でトランジションを段階的に行うための便利な方法です。例えば

transition.delay((d, i) => i * 10);

もちろん、データの関数として遅延を計算したり、選択をソートしてからインデックスベースの遅延を計算することもできます。

transition.duration(value)

ソースコード · 選択された各要素について、トランジションの期間をミリ秒単位で指定されたvalueに設定します。

transition.duration(750);

valueは、定数または関数として指定できます。関数の場合は、選択された各要素について順番にすぐに評価され、現在のデータム(d)、現在のインデックス(i)、現在のグループ(nodes)が渡され、thisは現在のDOM要素になります。関数の戻り値を使用して、各要素のトランジション期間が設定されます。期間が指定されていない場合、デフォルトで250msになります。

valueが指定されていない場合、トランジション内の最初の（nullでない）要素の期間の現在の値を返します。これは、トランジションに正確に1つの要素が含まれている場合にのみ一般的に役立ちます。

transition.duration() // 750

transition.ease(value)

ソースコード · 選択されたすべての要素のトランジションイージング関数を指定します。

transition.ease(d3.easeCubic);

valueは関数として指定する必要があります。イージング関数はアニメーションの各フレームに対して呼び出され、[0, 1]の範囲内の正規化された時間tが渡されます。その後、通常は[0, 1]の範囲内でもあるイージングされた時間tʹを返す必要があります。良好なイージング関数は、t = 0の場合は0を、t = 1の場合は1を返す必要があります。イージング関数が指定されていない場合、デフォルトでeaseCubicになります。

valueが指定されていない場合、トランジション内の最初の（nullでない）要素の現在のイージング関数を返します。これは、トランジションに正確に1つの要素が含まれている場合にのみ一般的に役立ちます。

transition.ease() // d3.easeCubic

transition.easeVarying(factory)

例 · ソースコード · トランジションイージング関数のファクトリを指定します。

transition.easeVarying((d) => d3.easePolyIn.exponent(d.exponent));

factoryは関数である必要があります。これは選択の各ノードに対して呼び出され、現在のデータム(d)、現在のインデックス(i)、現在のグループ(nodes)が渡され、thisは現在のDOM要素になります。イージング関数を返す必要があります。