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メソッド

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

要素の選択

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

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()−このメソッドは、選択した要素の新しい遷移を返すために使用されます。遷移が停止したときに開始するようにスケジュールされています。新しいトランジションは、このトランジションの名前、期間、およびイージングを継承します。

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

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'に渡されます。値が指定されていない場合、遷移の最初の（null以外の）要素の遅延の現在の値を返します。それは以下に定義されています、

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

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

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