作成者Observable

外観

要素の変更 ​

selection.transition で要素を選択し、トランジションを作成した後、トランジションの変換メソッドを使用してドキュメントのコンテンツを変更します。

transition.attr(name, value) ​

ソース・選択された各要素について、指定されたnameを持つ属性の属性トゥイーンを指定されたターゲットvalueに割り当てます。トゥイーンの開始値は、トランジションが開始されたときの属性の値です。ターゲットのvalueは、定数または関数のいずれかで指定できます。関数である場合、現在のデータ (d)、現在のインデックス (i)、現在のグループ (nodes) を渡して、現在の DOM 要素をthisとして、選択された各要素に対して順にすぐに評価されます。

ターゲット値が null の場合、トランジションの開始時に属性が削除されます。それ以外の場合は、次のアルゴリズムを使用して、ターゲット値の型に基づいて補間子が選択されます。

  1. valueが数値の場合は、interpolateNumberを使用します。
  2. valueが色、または色に変換可能な文字列の場合は、interpolateRgbを使用します。
  3. interpolateStringを使用します。

別の補間子を適用するには、transition.attrTweenを使用します。

transition.attrTween(name, factory) ​

ソース・factoryが指定され、nullでない場合、指定されたnameを持つ属性のトゥイーンを指定された補間子factoryに割り当てます。補間子ファクトリは、補間子を返す関数です。トランジションが開始されると、現在のデータ (d)、現在のインデックス (i)、現在のグループ (nodes) を渡して、現在の DOM 要素をthisとして、選択された各要素に対して順にfactoryが評価されます。次に、返された補間子が、通常は[0, 1]の範囲であるイーズされた時間tを渡して、トランジションの各フレームに対して順に呼び出されます。最後に、補間子の戻り値が属性値を設定するために使用されます。補間子は文字列を返す必要があります。(トランジションの開始時に属性を削除するには、transition.attrを使用します。トランジションの終了時に属性を削除するには、transition.onを使用して、endイベントをリッスンします。)

指定されたfactoryが null の場合、指定されたnameの以前に割り当てられた属性トゥイーン (存在する場合) を削除します。factoryが指定されていない場合は、指定されたnameを持つ属性の現在の補間子ファクトリを返すか、そのようなトゥイーンが存在しない場合は未定義を返します。

たとえば、fill属性を赤から青に補間するには

js
transition.attrTween("fill", () => d3.interpolateRgb("red", "blue"));

または、transition.attrのように、現在のfillから青に補間するには

js
transition.attrTween("fill", function() {
  return d3.interpolateRgb(this.getAttribute("fill"), "blue");
});

または、カスタムレインボー補間子を適用するには

js
transition.attrTween("fill", () => (t) => `hsl(${t * 360},100%,50%)`);

このメソッドは、SVGパスを理解するようなカスタム補間子を指定する場合に便利です。便利なテクニックは、interpolateObjectを使用して2つのデータ値を補間し、結果の値を(たとえば、シェイプを使用して)新しい属性値を計算するデータ補間です。

transition.style(name, value, priority) ​

ソース・選択された各要素について、指定されたnameを持つスタイルのスタイルトゥイーンを指定されたpriorityを持つ指定されたターゲットvalueに割り当てます。トゥイーンの開始値は、トランジションの開始時に、存在する場合はスタイルのインライン値であり、それ以外の場合は計算された値です。ターゲットのvalueは、定数または関数のいずれかで指定できます。関数である場合、現在のデータ (d)、現在のインデックス (i)、現在のグループ (nodes) を渡して、現在の DOM 要素をthisとして、選択された各要素に対して順にすぐに評価されます。

ターゲット値が null の場合、トランジションの開始時にスタイルが削除されます。それ以外の場合は、次のアルゴリズムを使用して、ターゲット値の型に基づいて補間子が選択されます。

  1. valueが数値の場合は、interpolateNumberを使用します。
  2. valueが色、または色に変換可能な文字列の場合は、interpolateRgbを使用します。
  3. interpolateStringを使用します。

別の補間子を適用するには、transition.styleTweenを使用します。

transition.styleTween(name, factory, priority) ​

ソース・factoryが指定され、nullでない場合、指定されたnameを持つスタイルのトゥイーンを指定された補間子factoryに割り当てます。補間子ファクトリは、補間子を返す関数です。トランジションが開始されると、現在のデータ (d)、現在のインデックス (i)、現在のグループ (nodes) を渡して、現在の DOM 要素をthisとして、選択された各要素に対して順にfactoryが評価されます。次に、返された補間子が、通常は[0, 1]の範囲であるイーズされた時間tを渡して、トランジションの各フレームに対して順に呼び出されます。最後に、補間子の戻り値が、指定されたpriorityを使用してスタイル値を設定するために使用されます。補間子は文字列を返す必要があります。(トランジションの開始時にスタイルを削除するには、transition.styleを使用します。トランジションの終了時にスタイルを削除するには、transition.onを使用して、endイベントをリッスンします。)

指定されたfactoryが null の場合、指定されたnameの以前に割り当てられたスタイルトゥイーン (存在する場合) を削除します。factoryが指定されていない場合は、指定されたnameを持つスタイルの現在の補間子ファクトリを返すか、そのようなトゥイーンが存在しない場合は未定義を返します。

たとえば、fillスタイルを赤から青に補間するには

js
transition.styleTween("fill", () => d3.interpolateRgb("red", "blue"));

または、transition.styleのように、現在のfillから青に補間するには

js
transition.styleTween("fill", function() {
  return d3.interpolateRgb(this.style.fill, "blue");
});

または、カスタムレインボー補間子を適用するには

js
transition.styleTween("fill", () => (t) => `hsl(${t * 360},100%,50%)`);

このメソッドは、interpolateObjectを使用して2つのデータ値を補間し、結果の値を新しいスタイル値を計算するために使用するようなデータ補間でカスタム補間子を指定する場合に便利です。

transition.text(value) ​

ソース・選択された各要素について、トランジションの開始時にテキストコンテンツを指定されたターゲットvalueに設定します。valueは、定数または関数のいずれかで指定できます。関数である場合、現在のデータ (d)、現在のインデックス (i)、現在のグループ (nodes) を渡して、現在の DOM 要素をthisとして、選択された各要素に対して順にすぐに評価されます。次に、関数の戻り値を使用して、各要素のテキストコンテンツを設定します。null値はコンテンツをクリアします。

開始時にテキストを設定するのではなく、テキストを補間するには、transition.textTweenを使用するか、置換要素を追加して、不透明度をクロスフェードします。通常は望ましくないため、テキストはデフォルトでは補間されません。

transition.textTween(factory) ​

ソース, 例

factoryが指定され、nullでない場合、テキストトゥイーンを指定された補間子factoryに割り当てます。補間子ファクトリは、補間子を返す関数です。トランジションが開始されると、現在のデータdとインデックスiを渡して、現在のDOM要素をthisコンテキストとして、選択された各要素に対して順にfactoryが評価されます。次に、返された補間子が、通常は[0, 1]の範囲であるイーズされた時間tを渡して、トランジションの各フレームに対して順に呼び出されます。最後に、補間子の戻り値がテキストを設定するために使用されます。補間子は文字列を返す必要があります。

例えば、0から100までの整数でテキストを補間するには

js
transition.textTween(() => d3.interpolateRound(0, 100));

指定されたfactoryがnullの場合、以前に割り当てられたテキストトゥイーンがあれば削除します。factoryが指定されていない場合は、テキストの現在の補間ファクトリを返します。そのようなトゥイーンが存在しない場合はundefinedを返します。

transition.remove() ​

ソース · 選択された各要素について、要素を削除します。ただし、要素に他のアクティブなトランジションまたは保留中のトランジションがない場合に限ります。要素に他のアクティブなトランジションまたは保留中のトランジションがある場合は、何も行いません。

transition.tween(name, value) ​

ソース · 選択された各要素について、指定されたnameを持つトゥイーンを指定されたvalue関数で割り当てます。valueは関数を返す関数として指定する必要があります。トランジションが開始されると、value関数は、選択された各要素に対して、現在のデータ（d）、現在のインデックス（i）、および現在のグループ（nodes）を引数として順番に評価されます。このとき、thisは現在のDOM要素となります。次に、返された関数がトランジションの各フレームで、イージングされた時間t（通常は[0, 1]の範囲）を引数として順番に呼び出されます。指定されたvalueがnullの場合、指定されたnameの以前に割り当てられたトゥイーンがあれば削除します。

例えば、transition.attrのように、fill属性を青色に補間するには

js
transition.tween("attr.fill", function() {
  const i = d3.interpolateRgb(this.getAttribute("fill"), "blue");
  return function(t) {
    this.setAttribute("fill", i(t));
  };
});