跳到內容

d3-interpolate

此模組提供各種內插法,用於混合兩個值。值可以是數字、顏色、字串、陣列,甚至深度巢狀物件。例如

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,它會取得一個參數 t,通常在 [0, 1] 之間,並回傳對應的內插值。內插器通常會在 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)"]}

請注意,通用值內插器不僅偵測巢狀物件和陣列,還偵測字串中嵌入的顏色字串和數字!

請參閱其中一個