[英]D3.js Scales with custom easing-like interpolation
I want to modify an array of numbers and output it to a new range using d3.scale
but with custom interpolation function. 我想修改数字数组并使用d3.scale
将其输出到新范围,但使用自定义插值函数。 The interpolation function should be one of the easing functions used in transitions, eg easeInOutQuad
: 插值函数应该是转换中使用的缓动函数之一,例如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;
}
So my input array [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
would become, more less, something like [0, 2, 5, 10, 20, 40, 70, 90, 95, 98, 100]
where numbers increase slower at the beginning of the array, then gradually faster towards the middle and then again slower towards the end. 所以我的输入数组[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
会变得更像[0, 2, 5, 10, 20, 40, 70, 90, 95, 98, 100]
其中数字在阵列的开始处增加较慢,然后朝向中间逐渐加快,然后在结束时再次减慢。
My code so far: 我的代码到目前为止:
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
Thanks for any suggestions/examples of how such an easing function could be used with d3.interpolate
. 感谢有关如何使用d3.interpolate
这样的缓动功能的任何建议/示例。
Thanks to this helpful example , it's solved now, so a linear array of numbers can be 'eased': 感谢这个有用的例子 ,它现在已经解决了,所以可以“放宽”线性数组:
linear = [0,25,50,75,100]
--> eased = [0,12.5,50,87.5,100]
linear = [0,25,50,75,100]
- > eased = [0,12.5,50,87.5,100]
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));
};
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.