插值器

以下内容大部分为官方文档翻译而来：

d3. interpolate(a.b)

返回两个任意值a和b之间的插值器。内插器的实现基于最终值b的类型，使用以下算法：

1. 如果b为null，未定义或布尔值，则使用常数b。
2. 如果b是数字，请使用interpolateNumber。
3. 如果b是一种颜色或可转换为颜色的字符串，请使用interpolateRgb。
4. 如果b是日期，请使用interpolateDate。
5. 如果b是字符串，请使用interpolateString。
6. 如果b是一个数组，请使用interpolateArray。
7. 如果b可强制转换为数字，请使用interpolateNumber。
8. 使用interpolateObject。

数值插值器 - d3.interpolateNumber(a,b)

var compNum=d3.interpolateNumber(0,3000);
console.log(compNum(0)); //0
console.log(compNum(0.5)); // 1500
console.log(compNum(0.0755)); // 226.5

整型数值插值器 - d3. interpolateRound(a,b)

var compNum=d3.interpolateNumber(0,3000);
console.log(compNum(0)); //0
console.log(compNum(0.5)); // 1500
console.log(compNum(0.075)); // 225

字符串插值器 - d3. interpolateString(a,b)

var compstring=d3.interpolateString("2px","13px");
console.log(compstring(0)); //2px
console.log(compstring(0.6)); //8.6px
console.log(compstring(0.75)); //10.25px

时间插值器 - d3.interpolateDate(a,b)

var compDate=d3.interpolateDate(new Date('2017,6,1'),new Date('2017,6,30'));
console.log(compDate(0));//Thu Jun 01 2017 00:00:00 GMT+0800 (中国标准时间)
console.log(compDate(0.6));//Sun Jun 18 2017 09:36:00 GMT+0800 (中国标准时间)
console.log(compDate(0.75));//Thu Jun 22 2017 18:00:00 GMT+0800 (中国标准时间)

数组插值器 - d3.interpolateArray(a,b)

var a=[10,15,20],b=[60,100,-30];
var compArray=d3.interpolateArray(a,b);
console.log(compArray(0));//[10, 15, 20]
console.log(compArray(0.6));//[40, 66, -10]
console.log(compArray(1));//[60, 100, -30]

对象插值器 - d3.interpolateObject(a,b)

var obja1={"name":'商品1',value:1000};
var obja2={"name":'商品100',value:5000};
var compObject=d3.interpolateObject(obja1,obja2);
console.log(compObject(0));//{name: "商品1", value: 1000}
console.log(compObject(0.6));//{name: "商品60.4", value: 3400}
console.log(compObject(1));//{name: "商品100", value: 5000}

RGB颜色插值器 - d3.interpolateRgb(a,b)

var compColor=d3.interpolateRgb(d3.rgb(0,209,47),d3.rgb(130,130));
console.log(compColor(0));//rgb(0, 209, 47)
console.log(compColor(0.5));//rgb(65, 170, 47)
console.log(compColor(0.7));//rgb(91, 154, 47)

CSS变换插值器 - d3.interpolateTransformCss(a,b)

const interpolator = d3.interpolateTransformCss(
   "translateY(12px) scale(2)",
   "translateX(3em) rotate(5deg)"
);
console.log(interpolator(0.5));
//translate(24px, 6px) 
//rotate(2.4999980262174595deg)  
//scale(1.5000001485168504,1.5000001485168504)

SVG变换插值器 - d3.interpolateTransformSvg(a,b)

官网例子

Zoom插值器 - d3.interpolateZoom(a,b)

官网例子

离散型插值器 - d3.interpolateDiscrete(values)

const colors = ["red", "blue", "green"],
interpolator2 = d3.interpolateDiscrete(colors),
random = d3.randomBates(3);
console.log(interpolator2(random()));//blue