两个值之间多种插值的方法
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=dataSet
})
}
样式插值后期补充
