D3.js 插值器 API 完整参考

D3.js 提供了许多实用的插值器 API ，可以帮助程序员实现很多动画效果。以下是 D3.js 插值器 API 的完整参考。

数值插值器

d3.interpolateNumber(a, b)

该函数返回一个可以在 a 和 b 之间插值的函数。

const interpolate = d3.interpolateNumber(0, 10);
console.log(interpolate(0.5)); // 5

d3.interpolateRound(a, b)

该函数返回一个可以在 a 和 b 之间以四舍五入的方式插值的函数。

const interpolate = d3.interpolateRound(0, 10);
console.log(interpolate(0.55)); // 6

字符串插值器

d3.interpolateString(a, b)

该函数返回一个可以在 a 和 b 之间插值的函数。a 和 b 必须是包含相同个数的数字和单位的字符串。

const interpolate = d3.interpolateString('10px', '30px');
console.log(interpolate(0.5)); // '20px'

d3.interpolateRgb(a, b)

该函数返回一个可以在 a 和 b 之间插值的函数。a 和 b 必须是合法的 RGB 颜色字符串。

const interpolate = d3.interpolateRgb('red', 'blue');
console.log(interpolate(0.5)); // 'rgb(128, 0, 128)'

d3.interpolateHsl(a, b)

该函数返回一个可以在 a 和 b 之间插值的函数。a 和 b 必须是合法的 HSL 颜色字符串。

const interpolate = d3.interpolateHsl('blue', 'red');
console.log(interpolate(0.5)); // 'rgb(128, 0, 128)'

d3.interpolateHcl(a, b)

该函数返回一个可以在 a 和 b 之间插值的函数。a 和 b 必须是合法的 HCL 颜色字符串。

const interpolate = d3.interpolateHcl('blue', 'red');
console.log(interpolate(0.5)); // 'rgb(128, 0, 128)'

d3.interpolateLab(a, b)

该函数返回一个可以在 a 和 b 之间插值的函数。a 和 b 必须是合法的 LAB 颜色字符串。

const interpolate = d3.interpolateLab('blue', 'red');
console.log(interpolate(0.5)); // 'rgb(128, 0, 128)'

插值器生成器

d3.interpolate(a, b)

该函数返回一个插值器函数，根据 a 和 b 的类型自动选择最适合的插值器。

const interpolate = d3.interpolate(0, 10);
console.log(interpolate(0.5)); // 5

d3.interpolateArray(a, b)

该函数返回一个可以在 a 和 b 之间插值的函数。a 和 b 必须是长度相同的数组。

const interpolate = d3.interpolateArray([0, 0], [10, 10]);
console.log(interpolate(0.5)); // [5, 5]

d3.interpolateObject(a, b)

该函数返回一个可以在 a 和 b 之间插值的函数。a 和 b 必须是拥有相同属性的对象。

const interpolate = d3.interpolateObject({x: 0, y: 0}, {x: 10, y: 10});
console.log(interpolate(0.5)); // {x: 5, y: 5}

d3.interpolateTransformSvg(a, b)

该函数返回一个可以在 a 和 b 之间插值的函数。a 和 b 必须是合法的 SVG 转换矩阵字符串。

const interpolate = d3.interpolateTransformSvg('translate(0,0)', 'translate(10,10)');
console.log(interpolate(0.5)); // 'translate(5,5)'

d3.interpolateTransformCss(a, b)

该函数返回一个可以在 a 和 b 之间插值的函数。a 和 b 必须是合法的 CSS 转换矩阵字符串。

const interpolate = d3.interpolateTransformCss('translate(0,0)', 'translate(10,10)');
console.log(interpolate(0.5)); // 'matrix(1, 0, 0, 1, 5, 5)'

自定义插值器

可以使用 d3.interpolater() 函数创建自定义的插值器函数。

const customInterpolate = d3.interpolate((a, b) => a.toUpperCase(), (a, b) => b.toUpperCase());
console.log(customInterpolate('d3', 'js')); // 'D3JS'