D3.js 使用自定义缓动式插值进行缩放

Question

我想修改数字数组并使用 d3.scale 将其输出到新范围，但使用自定义插值函数。插值函数应该是过渡中使用的缓动函数之一，例如easeInOutQuad:

easeInOutQuad = function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
}

所以我的输入数组 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 会变成，更多更少，类似于 [0, 2, 5, 10, 20, 40, 70, 90, 95, 98, 100]，其中数字在数组的开头增加得较慢，然后逐渐向中间变快，然后再向中间变慢结束。

到目前为止我的代码：

var inputArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    linearArr = [],
    easingArr = [],
    easing = d3.interpolate, // ?
    min = d3.min(inputArr),
    max = d3.max(inputArr),
    linearScale = d3.scale.linear()
        .domain([min,max])
        .range([0,100]),
    easingScale = d3.scale.linear()
        .domain([min,max])
        .interpolate(easing) // ?
        .range([0,100]);

for (var i = 0; i < inputArr.length; i++) {
    linearArr[i] = linearScale(inputArr[i]);
    easingArr[i] = easingScale(inputArr[i]);
}

console.log(linearArr); // 0,10,20,30,40,50,60,70,80,90,100
console.log(easingArr); // 0,10,20,30,40,50,60,70,80,90,100

感谢 suggestions/examples 了解如何将这种缓动函数与 d3.interpolate 一起使用。

Answer 1

感谢this helpful example，现在解决了，所以一个线性数组可以是'eased':

linear = [0,25,50,75,100] --> eased = [0,12.5,50,87.5,100]

这是code：

var steps = 5,
    zStart = 0,
    zEnd = 100,
    linearArr = [],
    easingArr = [],
    linearScale = d3.scaleLinear()
        .domain([0,1])
        .range([zStart,zEnd]),
    easingScale = d3.scaleLinear()
        .domain([0,1])
        .interpolate(easeInterpolate(d3.easeQuadInOut))
        .range([zStart,zEnd]);

for (var i = 0; i < steps; i++) {
    linearArr[i] = linearScale(i/(steps-1));
    easingArr[i] = easingScale(i/(steps-1));
}

console.log("linear (" + linearArr.length + "): " + linearArr);
console.log("easing (" + easingArr.length + "): " + easingArr);

function easeInterpolate(ease) {
    return function(a, b) {
        var i = d3.interpolate(a, b);
        return function(t) {
            return i(ease(t));
        };
    };
}

D3.js 使用自定义缓动式插值进行缩放

D3.js Scales with custom easing-like interpolation

javascript

d3.js

easing

easing-functions