兩個值之間多種插值的方法
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
})
}
樣式插值后期補充
