第十二章 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=dataSet
       })
  }
样式插值后期补充