【d3.js v4基础】差值器interpolate

差值器

插补数字，字符串，颜色，数组，对象等。api

d3.interpolate - 插补任意值。

d3.interpolateArray(a,b) - 插补任意值的数组。

返回一个在a和b两个数组之间插值的插值器。在内部首先会创建一个和b等长的数组，对于数组b中的每个元素，如果在a中有对应的元素，则则两个对应的元素之间进行插值。如果a中没有对应的元素则直接使用b中的元素。

d3.interpolateArray([1,4], [2,5])(0.12)
[1.12, 4.12]

d3.interpolateNumber(a,b) - 插补数。

var interpolate = d3.interpolateNumber(1, 10);
interpolate(1);
interpolate(0);
interpolate(0.12);
//ƒ (e){return t+n*e}
//10
// 1
//2.08

在a和b两个数值之间进行插值，定义如下:

function interpolator(t) {
  return a * (1 - t) + b * t;
}

d3.interpolateObject(a,b) - 插补充任意对象

返回一个在两个对象之间插值的插值器。在内部会创建一个临时的对象，这个临时的对象和b有相同的属性，然后在a中找相同的属性，然后对属性进行分别插值，如果a中没有对应的属性则返回b的值。

var a = {x: 0, y: 1};
var b = {x: 1, y: 10, z: 100};
d3.interpolateObject(a,b)(0.5)
// {x: 0.5, y: 5.5, z: 100}

对对象插值在计算数据时候是很有用的，比如在对arc进行过渡时，使用对象插值的方式对arc对象数据进行插值来计算过渡过程中的path值

  svg.selectAll("path")
        .data(pie(data))
        .enter().append("path")
        .style("fill", function (d, i) {
            return colors[i]
        })
        .each(function (d) { this._current = { startAngle: d.startAngle, endAngle: d.startAngle }; })
        .transition()
        .duration(100)
        .ease(d3.easeLinear)
        .delay(function (d, i) { return i * 100; })
        .attrTween("d", function (d) {
            var interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);
            return function (t) {
                return arc(interpolate(t));
            };
        });

d3.interpolateRound - 插补整数。

同interpolateNumber但只返回整数

var interpolate = d3.interpolateNumber(1, 10);
interpolate(0.12);
//2

d3.interpolateDate(a, b)

返回一个日期类型的插值器。返回的类型为Date类型。

d3.interpolateString - 插补嵌入数字的字符串。

d3.interpolateTransformCss(a,b) - 插补2D CSS变换。

创建一个2D CSS变换插值器，比如translate, rotate, x-skew 和 scale等。

d3.interpolateTransformCss('translate(10px,10px)', 'translate(100px,100px)')(.4)
//translate(46px, 46px)

d3.interpolateTransformSvg(a,b) - 插补2D SVG变换。

var i = d3.interpolateTransformSvg("scale(1)","scale(10)");

i(0.5);    //"scale(0.5,0.5)", 返回标准形式

d3.interpolateZoom - 两个视图之间平移和缩放。

d3.interpolateRgb(a,b) - 插补RGB颜色。

d3.interpolateRgb('rgb(0,0,0)', 'rgb(255,255,100)')(.4);
rgb(102, 102, 40)

d3.interpolateHsl - 插补HSL颜色。
d3.interpolateHslLong - 插补HSL颜色（长整型）。
d3.interpolateLab - 插补Lab颜色。
d3.interpolateHcl - 插补HCL颜色。
d3.interpolateHclLong - 插补HCL颜色（长整型）。
d3.interpolateCubehelix - 插补Cubehelix颜色。
d3.interpolateCubehelixLong - 插补Cubehelix颜色（长整型）。
interpolate.gamma - 在插值过程中使用γ矫正。