D3js-transitions-api

D3.js-トランジションAPI

D3トランジションは、要素の選択と各要素を取得します。要素の現在の定義の一部に遷移を適用します。

APIの構成

次のスクリプトを使用して、移行APIを構成できます。

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script>

</script>

移行APIメソッド

Transition APIメソッドについて詳しく見ていきましょう。

要素を選択する

さまざまな選択要素について詳しく説明します。

• * selection.transition（[name]）*-このメソッドは、名前を持つ新しい選択遷移を返すために使用されます。 名前が指定されていない場合、nullを返します。
• * selection.interrupt（[name]）*-このメソッドは、遷移の選択された要素を名前で中断するために使用され、以下で定義されます。

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

• * d3.interrupt（node [、name]）*-このメソッドは、指定されたノード上の指定された名前の遷移を中断するために使用されます。
• * d3.transition（[name]）*-このメソッドは、指定された名前の新しい遷移を返すために使用されます。
• * transition.select（selector）*-このメソッドは、指定されたセレクターに一致する最初の要素を選択するために使用され、結果の選択で遷移を返します。

transition
   .selection()
   .select(selector)
   .transition(transition)

• * transition.selectAll（selector）*-このメソッドは、指定されたセレクタに一致するすべての要素を選択するために使用され、結果の選択で遷移を返します。 以下に定義されています-

transition
   .selection()
   .selectAll(selector)
   .transition(transition)

• * transition.filter（filter）*-このメソッドは、指定されたフィルターに一致する要素を選択するために使用されます。それらは以下で定義されます。

transition
   .selection()
   .filter(filter)
   .transition(transition)

• * transition.merge（other）*-このメソッドは、遷移を他の遷移とマージするために使用されます。 以下に定義されています。

transition
   .selection()
   .merge(other.selection())
   .transition(transition)

• * transition.transition（）*-このメソッドは、選択した要素の新しい遷移を返すために使用されます。 移行が停止すると開始するようにスケジュールされています。 新しいトランジションは、このトランジションの名前、期間、イージングを継承します。

例-次の例を考えてみましょう。

d3.selectAll(".body")
   .transition()

  //fade to yellow.
   .style("fill", "yellow")
   .transition()

  //Wait for five second. Then change blue, and remove.
   .delay(5000)
   .style("fill", "blue")
   .remove();

ここで、ボディは黄色にフェードし、最後の遷移の5秒前に開始します。

• * d3.active（node [、name]）*-このメソッドは、名前を持つ指定されたノードの遷移を返すために使用されます。

タイミング方法

遷移タイミングAPIメソッドを詳しく見ていきましょう。

• * transition.delay（[value]）*-このメソッドは、遷移遅延を指定された値に設定するために使用されます。 選択された各要素に対して関数が評価される場合、コンテキストは現在のDOM要素として、現在のデータム「d」およびインデックス「i」に渡されます。 値が指定されていない場合、遷移の最初の（非ヌル）要素の遅延の現在の値を返します。 以下で定義されています。

transition.delay(function(d, i) { return i * 10; });

• * transition.duration（[value]）*-このメソッドは、遷移期間を指定された値に設定するために使用されます。 値が指定されていない場合、遷移の最初の（非null）要素の継続時間の現在の値を返します。
• * transition.ease（[value]）*-このメソッドは、選択した要素の遷移値を緩和するために使用されます。 イージング関数は、アニメーションの各フレームに対して呼び出され、範囲[0、1]の正規化された時間「t」を渡します。 値が指定されていない場合、遷移の最初の（非null）要素の現在のイージング関数を返します。

次の章では、d3.jsのドラッグアンドドロップの概念について説明します。