d3 v4 api interpolate

方法	说明
d3.interpolate	interpolate arbitrary values.
d3.interpolateArray	interpolate arrays of arbitrary values.
d3.interpolateDate	interpolate dates.
d3.interpolateNumber	interpolate numbers.
d3.interpolateObject	interpolate arbitrary objects.
d3.interpolateRound	interpolate integers.
d3.interpolateString	interpolate strings with embedded numbers.
d3.interpolateTransformCss	interpolate 2D CSS transforms.
d3.interpolateTransformSvg	interpolate 2D SVG transforms.
d3.interpolateZoom	zoom and pan between two views.
d3.interpolateRgb	interpolate RGB colors.
d3.interpolateRgbBasis	generate a B spline through a set of colors.
d3.interpolateRgbBasisClosed	generate a closed B spline through a set of colors.
d3.interpolateHsl	interpolate HSL colors.
d3.interpolateHslLong	interpolate HSL colors, the long way.
d3.interpolateLab	interpolate Lab colors.
d3.interpolateHcl	interpolate HCL colors.
d3.interpolateHclLong	interpolate HCL colors, the long way.
d3.interpolateCubehelix	interpolate Cubehelix colors.
d3.interpolateCubehelixLong	interpolate Cubehelix colors, the long way.
interpolate.gamma	apply gamma correction during interpolation.
d3.interpolateBasis	generate a B spline through a set of values.
d3.interpolateBasisClosed	generate a closed B spline through a set of values.
d3.piecewise	generate a piecewise linear interpolator from a set of values.
d3.quantize	generate uniformly spaced samples from an interpolator.

var i = d3.interpolateRound(100, 200);
//插值可以理解为将(0,1)映射到(100,200)
i(0.1)
110
i(0.11)
111
i(0.111)
111

插值算法的一个bug

tween中的m输出都是2,所以不能在循环中使用

for (var m of [1,2]){
	 textRects = textRects.transition()
	         .attr('x', (d)=>padding.left + linear(d['values'][m]['GDP']))
	         .attr('y', (d)=>padding.top + (d['values'][m]['rank']-1)*rectHG+0.5*rectHeight)
	         .duration(duration)
	         .tween("text",function(d,tw){
	             console.log(m)
	                 var tw = d3.interpolateRound(d['values'][m-1]['GDP'],d['values'][m]['GDP'])
	                 return function(t){this.textContent = tw(t)}
	             })
}

循环异步
https://www.cnblogs.com/xiujun/p/10637037.html
https://observablehq.com/@d3/bar-chart-race