要素の選択

トランジションは、選択からselection.transitionを介して派生します。また、d3.transitionを使用して、ドキュメントのルート要素にトランジションを作成することもできます。

selection.transition(name)

ソース · 指定されたnameを持つ指定されたselection上に新しいトランジションを返します。nameが指定されていない場合は、nullが使用されます。新しいトランジションは、同じ名前の他のトランジションとのみ排他的になります。

nameがトランジションインスタンスである場合、返されるトランジションは、指定されたトランジションと同じIDと名前を持ちます。選択された要素に同じIDを持つトランジションが既に存在する場合、その要素に対して既存のトランジションが返されます。それ以外の場合、返されるトランジションのタイミングは、選択された各要素の最も近い祖先上の同じIDを持つ既存のトランジションから継承されます。したがって、このメソッドを使用して、複数の選択間でトランジションを同期したり、特定の要素のトランジションを再選択して構成を変更したりできます。例:

const t = d3.transition()
    .duration(750)
    .ease(d3.easeLinear);

d3.selectAll(".apple").transition(t)
    .style("fill", "red");

d3.selectAll(".orange").transition(t)
    .style("fill", "orange");

指定されたtransitionが選択されたノードまたはその祖先に見つからない場合（トランジションが既に終了した場合など）、デフォルトのタイミングパラメータが使用されます。ただし、今後のリリースでは、エラーをスローするように変更される可能性があります。 #59を参照してください。

transition(name)

ソース · 指定されたnameを持つルート要素document.documentElement上に新しいトランジションを返します。nameが指定されていない場合は、nullが使用されます。新しいトランジションは、同じ名前の他のトランジションとのみ排他的になります。nameは、トランジションインスタンスである場合もあります。selection.transitionを参照してください。このメソッドは、以下と同等です。

d3.selection()
  .transition(name)

この関数は、トランジション（instanceof d3.transition）をテストしたり、トランジションプロトタイプを拡張したりするためにも使用できます。

transition.select(selector)

ソース · 選択された各要素について、指定されたselector文字列に一致する最初の descendant 要素を選択し（存在する場合）、結果として得られた選択上にトランジションを返します。selectorは、セレクター文字列または関数として指定できます。関数である場合、選択された各要素について、現在のデータ(d)、現在のインデックス(i)、および現在のグループ(nodes)が渡され、thisは現在のDOM要素として、順に評価されます。新しいトランジションは、このトランジションと同じID、名前、タイミングを持ちます。ただし、選択された要素に同じIDを持つトランジションが既に存在する場合、その要素に対して既存のトランジションが返されます。

このメソッドは、transition.selectionを介してこのトランジションの選択を導出し、selection.selectを介してサブ選択を作成し、次にselection.transitionを介して新しいトランジションを作成することと同等です。

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

transition.selectAll(selector)

ソース · 選択された各要素について、指定されたselector文字列に一致するすべての descendant 要素を選択し（存在する場合）、結果として得られた選択上にトランジションを返します。selectorは、セレクター文字列または関数として指定できます。関数である場合、選択された各要素について、現在のデータ(d)、現在のインデックス(i)、および現在のグループ(nodes)が渡され、thisは現在のDOM要素として、順に評価されます。新しいトランジションは、このトランジションと同じID、名前、タイミングを持ちます。ただし、選択された要素に同じIDを持つトランジションが既に存在する場合、その要素に対して既存のトランジションが返されます。

このメソッドは、transition.selectionを介してこのトランジションの選択を導出し、selection.selectAllを介してサブ選択を作成し、次にselection.transitionを介して新しいトランジションを作成することと同等です。

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

transition.selectChild(selector)

ソース · 選択された各要素について、指定されたselector文字列に一致する最初の child 要素を選択し（存在する場合）、結果として得られた選択上にトランジションを返します。selectorは、セレクター文字列または関数として指定できます。関数である場合、選択された各要素について、現在のデータ(d)、現在のインデックス(i)、および現在のグループ(nodes)が渡され、thisは現在のDOM要素として、順に評価されます。新しいトランジションは、このトランジションと同じID、名前、タイミングを持ちます。ただし、選択された要素に同じIDを持つトランジションが既に存在する場合、その要素に対して既存のトランジションが返されます。

このメソッドは、transition.selectionを介してこのトランジションの選択を導出し、selection.selectChildを介してサブ選択を作成し、次にselection.transitionを介して新しいトランジションを作成することと同等です。

transition
  .selection()
  .selectChild(selector)
  .transition(transition)

transition.selectChildren(selector)

ソース · 選択された各要素について、指定されたselector文字列に一致するすべての child 要素を選択し（存在する場合）、結果として得られた選択上にトランジションを返します。selectorは、セレクター文字列または関数として指定できます。関数である場合、選択された各要素について、現在のデータ(d)、現在のインデックス(i)、および現在のグループ(nodes)が渡され、thisは現在のDOM要素として、順に評価されます。新しいトランジションは、このトランジションと同じID、名前、タイミングを持ちます。ただし、選択された要素に同じIDを持つトランジションが既に存在する場合、その要素に対して既存のトランジションが返されます。

このメソッドは、transition.selectionを介してこのトランジションの選択を導出し、selection.selectChildrenを介してサブ選択を作成し、次にselection.transitionを介して新しいトランジションを作成することと同等です。

transition
  .selection()
  .selectChildren(selector)
  .transition(transition)

transition.filter(filter)

ソース · 選択された各要素について、指定されたfilterに一致する要素のみを選択し、結果として得られた選択上にトランジションを返します。filterは、セレクター文字列または関数として指定できます。関数である場合、選択された各要素について、現在のデータ(d)、現在のインデックス(i)、および現在のグループ(nodes)が渡され、thisは現在のDOM要素として、順に評価されます。新しいトランジションは、このトランジションと同じID、名前、タイミングを持ちます。ただし、選択された要素に同じIDを持つトランジションが既に存在する場合、その要素に対して既存のトランジションが返されます。

このメソッドは、transition.selectionを介してこのトランジションの選択を導出し、selection.filterを介してサブ選択を作成し、次にselection.transitionを介して新しいトランジションを作成することと同等です。

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

transition.merge(other)

ソース · このトランジションと、指定されたotherトランジションをマージする新しいトランジションを返します。otherトランジションは、このトランジションと同じIDを持つ必要があります。返されるトランジションは、このトランジションと同じ数のグループ、同じ親、同じ名前、同じIDを持ちます。このトランジションに欠落している（null）要素は、otherトランジションに存在する場合（nullでない場合）、対応する要素で埋められます。

このメソッドは、transition.selection を介してこのトランジションの選択を導出し、同様に他のトランジションから導出された選択と selection.merge を介してマージし、その後 selection.transition を介して新しいトランジションを作成するのと同等です。

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

transition.transition()

ソース · このトランジションと同じ選択された要素に対して、このトランジションの終了時に開始するようにスケジュールされた新しいトランジションを返します。新しいトランジションは、このトランジションの時間に 遅延 と 期間 を加えたものに等しい参照時間を継承します。新しいトランジションは、このトランジションの名前、期間、および イージング も継承します。このメソッドは、連鎖したトランジションのシーケンスをスケジュールするために使用できます。例:

d3.selectAll(".apple")
  .transition() // First fade to green.
    .style("fill", "green")
  .transition() // Then red.
    .style("fill", "red")
  .transition() // Wait one second. Then brown, and remove.
    .delay(1000)
    .style("fill", "brown")
    .remove();

各トランジションの遅延は、前のトランジションに対して相対的です。したがって、上記の例では、リンゴは最後の茶色へのトランジションが開始されるまで 1 秒間赤色のままになります。

transition.selection()

ソース · このトランジションに対応する 選択 を返します。

active(node, name)

例 · ソース · 指定されたノード上で指定された名前を持つアクティブなトランジション（もしあれば）を返します。名前が指定されていない場合は、null が使用されます。指定されたノードにそのようなアクティブなトランジションがない場合は、null を返します。このメソッドは、連鎖したトランジションを作成するのに役立ちます。例：ディスコモードを開始するには

d3.selectAll("circle").transition()
    .delay((d, i) => i * 50)
    .on("start", function repeat() {
        d3.active(this)
            .style("fill", "red")
          .transition()
            .style("fill", "green")
          .transition()
            .style("fill", "blue")
          .transition()
            .on("start", repeat);
      });