d3.js 关于过渡的变换应用

今天跟博士讨论了一个很有趣的数学问题。

关于图形的变换：

1、

d3.v3

var ease = d3.ease("cubic-in-out");

d3.v4

var ease  =  d3.easeCubicInOut;  

---------------------------------------------

d3.v3

line.transition().duration(1000).ease("cubic-in-out").style("fill" , "red")

d3.v4

line.transition().duration(1000).ease(d3.easeCubicInOut).style("fill" , "red")

2、

js中函数可以赋值，可以点击api查看源代码，它的函数格式。

3、

ease的作用类似于渐变函数，使得某个数值随着这个函数进行变化。

当你不知道数值到底怎么变化时，可以直接用console.log( ease(***))的方式查看变化规律

var ease = d3.easeCubicInOut,
       duration = 7500;
    d3.timer(function(elapsed) {
        var t = ease(1 - Math.abs((elapsed % duration) / duration - .5) * 2),
            startAngle = -Math.PI / 3 * t - .1,
            endAngle = -startAngle;
}