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)"]}
請注意,通用值內插器不僅偵測巢狀物件和陣列,還偵測字串中嵌入的顏色字串和數字!
請參閱其中一個