値の補間

これらは、ほとんどの値に適した最も一般的な補間器です。

interpolate(a, b)

例 · ソース · 2つの任意の値 *a* と *b* の間の補間器を返します。

d3.interpolate("red", "blue")(0.5) // "rgb(128, 0, 128)"

補間器の実装は、終値 *b* の型に基づいて、次のアルゴリズムを使用します。

1. *b* が null、undefined、またはブール値の場合、定数 *b* を使用します。
2. *b* が数値の場合、interpolateNumber を使用します。
3. *b* が 色 または色に強制変換可能な文字列の場合、interpolateRgb を使用します。
4. *b* が 日付 の場合、interpolateDate を使用します。
5. *b* が文字列の場合、interpolateString を使用します。
6. *b* が数値の型付き配列の場合、interpolateNumberArray を使用します。
7. *b* が汎用配列の場合、interpolateArray を使用します。
8. *b* が数値に強制変換可能な場合、interpolateNumber を使用します。
9. interpolateObject を使用します。

選択された補間器に基づいて、*a* は適切な対応する型に強制変換されます。

interpolateNumber(a, b)

例 · ソース · 2つの数値 *a* と *b* の間の補間器を返します。

d3.interpolateNumber(20, 620)(0.8) // 500

返される補間器は以下と同等です

function interpolator(t) {
  return a * (1 - t) + b * t;
}

注意

補間器を使用して文字列を生成する場合、ゼロとの間で補間することは避けてください。非常に小さい値が文字列化されると、古いブラウザでは無効な属性またはスタイルプロパティ値である科学的記法に変換される可能性があります。たとえば、数値 0.0000001 は文字列 "1e-7" に変換されます。これは、不透明度を補間する場合に特に顕著です。科学的記法を避けるには、1e-6（科学的記法で文字列化されない最小値）でトランジションを開始または終了します。

interpolateRound(a, b)

例 · ソース · 2つの数値 *a* と *b* の間の補間器を返します。

d3.interpolateRound(20, 620)(0.821) // 513

補間器は interpolateNumber に似ていますが、結果の値を最も近い整数に丸めます。

interpolateString(a, b)

例 · ソース · 2つの文字列 *a* と *b* の間の補間器を返します。

d3.interpolateString("20px", "32px")(0.5) // "26px"

文字列補間器は、*a* と *b* に埋め込まれた数値を検出します。ここで、各数値は JavaScript で理解される形式です。文字列内で検出される数値のいくつかの例: -1、42、3.14159、および 6.0221413e+23。

*b* に埋め込まれた各数値について、補間器は *a* に対応する数値を検索しようとします。対応する数値が見つかった場合、数値補間器が interpolateNumber を使用して作成されます。文字列 *b* の残りの部分はテンプレートとして使用されます。文字列 *b* の静的な部分は補間で一定のままになり、補間された数値がテンプレートに埋め込まれます。

たとえば、*a* が "300 12px sans-serif" で、*b* が "500 36px Comic-Sans" の場合、2 つの埋め込み数値が見つかります。残りの静的部分 (文字列 *b* の) は、2 つの数値の間のスペース (" ") と接尾辞 ("px Comic-Sans") です。 *t* = 0.5 の場合の補間器の結果は "400 24px Comic-Sans" です。

interpolateDate(a, b)

例 · ソース · 2つの日付 *a* と *b* の間の補間器を返します。

d3.interpolateDate(new Date("2014-01-01"), new Date("2024-01-01"))(0.5) // 2019-01-01

注意

返された日付の防御的コピーは作成されません。補間器のすべての評価に対して同じ Date インスタンスが返されます。補間器は アニメーション遷移の内部ループの一部であることが多いため、パフォーマンス上の理由からコピーは作成されません。

interpolateArray(a, b)

例 · ソース · 2つの配列 *a* と *b* の間の補間器を返します。

d3.interpolateArray([0, 0, 0], [1, 2, 3])(0.5) // [0.5, 1, 1.5]

*b* が型付き配列 (例: Float64Array) の場合、代わりに interpolateNumberArray が呼び出されます。

内部的には、*b* と同じ長さの配列テンプレートが作成されます。*b* の各要素について、*a* に対応する要素が存在する場合、interpolate を使用して、2つの要素に対して汎用補間器が作成されます。そのような要素がない場合、*b* からの静的な値がテンプレートで使用されます。次に、指定されたパラメータ *t* に対して、テンプレートに埋め込まれた補間器が評価されます。更新された配列テンプレートが返されます。

たとえば、*a* が配列 [0, 1] で、*b* が配列 [1, 10, 100] の場合、*t* = 0.5 の場合の補間器の結果は配列 [0.5, 5.5, 100] です。

注意

テンプレート配列の防御的コピーは作成されません。返された配列の変更は、その後の補間器の評価に悪影響を与える可能性があります。補間器は アニメーション遷移の内部ループの一部であることが多いため、パフォーマンス上の理由からコピーは作成されません。

interpolateNumberArray(a, b)

例 · ソース · 2つの数値配列 *a* と *b* の間の補間器を返します。

d3.interpolateNumberArray([0, 1], Float64Array.of(1, 3))(0.5) // [0.5, 2]

内部的には、*b* と同じ型と長さの配列テンプレートが作成されます。 *b* の各要素について、*a* に対応する要素が存在する場合、値は配列テンプレートに直接補間されます。そのような要素がない場合は、*b* からの静的な値がコピーされます。更新された配列テンプレートが返されます。

注意

テンプレート配列と引数 *a* および *b* の防御的コピーは作成されません。これらの配列の変更は、その後の補間器の評価に影響を与える可能性があります。

interpolateObject(a, b)

例 · ソース · 2つのオブジェクト *a* と *b* の間の補間器を返します。

d3.interpolateObject({x: 0, y: 1}, {x: 1, y: 10, z: 100})(0.5) // {x: 0.5, y: 5.5, z: 100}

内部的には、bと同じプロパティを持つオブジェクトテンプレートが作成されます。bの各プロパティに対して、aに対応するプロパティが存在する場合、interpolateを使用して2つの要素に対して汎用的な補間器が作成されます。そのようなプロパティが存在しない場合は、テンプレートでbからの静的な値が使用されます。次に、指定されたパラメータtに対して、テンプレートに埋め込まれた補間器が評価され、更新されたオブジェクトテンプレートが返されます。

たとえば、aがオブジェクト{x: 0, y: 1}で、bがオブジェクト{x: 1, y: 10, z: 100}の場合、t = 0.5の補間器の結果はオブジェクト{x: 0.5, y: 5.5, z: 100}になります。

オブジェクト補間は、属性値ではなくデータが補間されるデータ空間補間に特に役立ちます。たとえば、円グラフの弧を記述するオブジェクトを補間し、arcを使用して新しいSVGパスデータを計算できます。

注意

テンプレートオブジェクトの防御的なコピーは作成されません。返されたオブジェクトの変更は、後続の補間器の評価に悪影響を及ぼす可能性があります。パフォーマンス上の理由からコピーは作成されません。補間器は、アニメーション化されたトランジションの内部ループの一部であることがよくあります。

interpolateBasis(values)

例 · ソース · 指定されたvaluesの配列（数値でなければなりません）を介した均一な非有理Bスプライン補間器を返します。

d3.interpolateBasis([0, 0.1, 0.4, 1])(0.5) // 0.2604166666666667

暗黙の制御点は、補間器がt = 0でvalues[0]を、t = 1でvalues[values.length - 1]を返すように生成されます。curveBasisとinterpolateRgbBasisも参照してください。

interpolateBasisClosed(values)

例 · ソース · 指定されたvaluesの配列（数値でなければなりません）を介した均一な非有理Bスプライン補間器を返します。

d3.interpolateBasisClosed([0, 0.1, 0.4, 1])(0.5) // 0.45

制御点は暗黙的に繰り返され、結果として得られる一次元スプラインは、tが[0,1]で繰り返されるときに周期的なC²連続性を持ちます。curveBasisClosedとinterpolateRgbBasisClosedも参照してください。

interpolateDiscrete(values)

例 · ソース · 指定されたvaluesの配列に対する離散補間器を返します。

d3.interpolateDiscrete(["red", "blue", "green"])(0.5) // "blue"

返された補間器は、[0, 1 / n)のtをvalues[0]に、[1 / n, 2 / n)のtをvalues[1]に、以下同様にマッピングします。ここで、n = values.lengthです。実際には、これは[0, 1]の固定ドメインを持つ軽量の量子化スケールです。

quantize(interpolator, n)

例 · ソース · 指定されたinterpolatorからn個の均等に配置されたサンプルを返します。ここで、nは1より大きい整数です。

d3.quantize(d3.interpolate("red", "blue"), 4) // ["rgb(255, 0, 0)", "rgb(170, 0, 85)", "rgb(85, 0, 170)", "rgb(0, 0, 255)"]

最初のサンプルは常にt = 0であり、最後のサンプルは常にt = 1です。これは、量子化スケールの範囲を連続補間器から導出するなど、指定された補間器から固定数のサンプルを生成するのに役立ちます。

注意

このメソッドは、interpolateArray、interpolateDate、interpolateObjectなど、出力の防御的コピーを返さない補間器では機能しません。これらの補間器の場合、補間器をラップし、返される値ごとにコピーを作成する必要があります。

piecewise(interpolate, values)

例 · ソース · 隣接するvaluesの各ペアに対して補間器を構成する、区分的な補間器を返します。

d3.piecewise(d3.interpolateRgb.gamma(2.2), ["red", "green", "blue"])

interpolateが指定されていない場合は、デフォルトでinterpolateになります。

d3.piecewise(["red", "green", "blue"])

返された補間器は、[0, 1 / (n - 1)]のtをinterpolate(values[0], values[1])に、[1 / (n - 1), 2 / (n - 1)]のtをinterpolate(values[1], values[2])に、以下同様にマッピングします。ここで、n = values.lengthです。実際には、これは軽量の線形スケールです。