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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 对集合的操作 关于d3.attr 一个可以处理很多情况的函数,当只传入一个参数时,如果是string,则返回该属性...
    陈坚生阅读 7,460评论 0 2
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,486评论 19 139
  • 再谈CSS 预处理器2016-09-09 Justineo JavaScript转自:http://efe.bai...
    抓住时间的尾巴吧阅读 5,548评论 0 2
  • 开始以为石神在通过他精密的计算和逻辑能力来掩饰和误导警方对凶手身份的确认,并且读小说时也进入小说想如何能更好的帮助...
    yangsa阅读 3,690评论 0 51