第十二章|第十二章 D3插值器第十二章D3插值器

【第十二章|第十二章 D3插值器】两个值之间多种插值的方法
d3.interpolateNumber(a, b) 数字插值器默认

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

d3.interpolateRound(a, b) 结果取整
d3.interpolateString(a, b) 字符串 d3.interpolateDate(a, b) 日期插值 d3.interpolateArray(a, b) 数组插值对于a为[0,1],b为[1,10,100],t为0.5时返回值为[0.5,5.5,100], a中没有和100对应的值，因此直接使用b中的值.
d3.interpolateObject(a, b) d3.interpolateTransformCss(a, b) css样式插值器 d3.interpolateTransformSvg(a, b) svg样式插值 d3.interpolateZoom(a, b) zoom插值使用方法：(例：解决了默认interpolateTransformSvg插值时旋转角默认小于180度)

function update(dataSet){ dataSet = Math.random()*100 dataText.transition() .text( Math.round(dataSet)) dataG.transition() .duration(300) .attrTween('transform', function(){ // 规定旋转A -B var i = d3.interpolateNumber(oldData,dataSet); return function(t){ return 'rotate('+scaleKe(i(t))+')' } }) .tween('', function(){ // 规定旋转A -B时，使用数字形式插值 console.log('aaa',oldData,dataSet) var i = d3.interpolateNumber(oldData,dataSet); var text; return function(t){ console.log(i(t)) const d0 = i(t) console.log('bbb',scaleKe(d0)) return 'rotate('+scaleKe(d0)+')' } }) .on('end',function(){ oldData=https://www.it610.com/article/dataSet }) } 样式插值后期补充