以下內(nèi)容大部分為官方文檔翻譯而來：

d3. interpolate(a.b)

返回兩個任意值a和b之間的插值器。內(nèi)插器的實現(xiàn)基于最終值b的類型，使用以下算法：

1. 如果b為null驮俗，未定義或布爾值骆捧，則使用常數(shù)b。
2. 如果b是數(shù)字藕筋，請使用interpolateNumber翅雏。
3. 如果b是一種顏色或可轉(zhuǎn)換為顏色的字符串圈驼，請使用interpolateRgb。
4. 如果b是日期望几，請使用interpolateDate绩脆。
5. 如果b是字符串，請使用interpolateString。
6. 如果b是一個數(shù)組衙伶，請使用interpolateArray祈坠。
7. 如果b可強制轉(zhuǎn)換為數(shù)字害碾，請使用interpolateNumber矢劲。
8. 使用interpolateObject。

數(shù)值插值器 - 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

整型數(shù)值插值器 - 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 (中國標(biāo)準(zhǔn)時間)
console.log(compDate(0.6));//Sun Jun 18 2017 09:36:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)
console.log(compDate(0.75));//Thu Jun 22 2017 18:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)

數(shù)組插值器 - 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)

官網(wǎng)例子

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

官網(wǎng)例子

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

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