作成者Observable

外観

d3-interpolate ​

このモジュールは、2つの値の間をブレンドするためのさまざまな補間メソッドを提供します。値は、数値、色、文字列、配列、さらには深くネストされたオブジェクトでもかまいません。例:

js
const i = d3.interpolateNumber(10, 20);
i(0.0); // 10
i(0.2); // 12
i(0.5); // 15
i(1.0); // 20

返される関数iは補間器です。開始値aと終了値bが与えられた場合、通常[0, 1]の範囲のパラメータtを受け取り、対応する補間された値を返します。補間器は通常、t = 0でaに相当する値を返し、t = 1でbに相当する値を返します。

数値だけでなく、さまざまなものを補間できます。steelblueとbrownの知覚的な中間点を見つけるには

js
d3.interpolateLab("steelblue", "brown")(0.5); // "rgb(142, 92, 109)"

または、t = 0からt = 1までのカラーランプとして

これは、interpolateで使用される型推論を示すより複雑な例です。

js
const i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

ジェネリックな値の補間器は、ネストされたオブジェクトや配列だけでなく、文字列に埋め込まれた色文字列や数値も検出することに注意してください！

以下を参照してください。