动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化过程的。而这个变化过程在 D3 里我们称之为过渡（transition）。
添加过渡效果到条形图上
该 API 的功能为启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜色等等）
<script src="https://d3js.org/d3.v6.min.js"></script>
<p id="click3">Click to Update</p>
<div id="view011201"></div>
<script>
data = [120, 140, 150, 180] // define width is array
svg = d3.select("#view011201")
.append("svg")
.attr("width", 250)
.attr("height", 150)
chart = svg // select svg
.selectAll('rect')
.data(data).enter()
.append('rect')
.attr('x', 0)
.attr('y', function(d,i) {return i * 30})
.attr('width', function(d) {return d})
.attr('height', 25)
d3.select("#click3")
.on("click", function() { // Event listener - later about that!
// create random data
data = [Math.round(Math.random()*120),
Math.round(Math.random()*140),
Math.round(Math.random()*150),
Math.round(Math.random()*180)] // Custom function, we can write your own!
// update rect widths with enw data
svg
.selectAll("rect") // select rects to be updated
.data(data) // New data binded to rects
.transition() // 启动过渡
.attr('width', function(d) {return d}) // visual attribute to be updated
})
</script>
transition
添加持续时间
该 API 的功能为指定过渡的持续时间，单位为毫秒。
// update rect widths with enw data
svg
.selectAll("rect") // select rects to be updated
.data(data) // New data binded to rects
.transition() // 启动过渡
.duration(1000) // 指定过渡的持续时间 in milliseconds
duration
添加扭曲
Easing 是一种通过扭曲时间来控制动画中的表现形式的方法。通常被用来 slow-in, slow-out。通过对时间的缓动，animated transitions 会更平滑且运动过程也更合理。
该 API 的功能为指定过渡的变化方式，常用的有：
- linear：普通的线性变化；
- circle：慢慢地到达变换的最终状态；
- elastic：带有弹跳的到达最终状态；
- bounce：在最终状态处弹跳几次；
// update rect widths with enw data
var linear = d3.easePoly.exponent(1),
quad = d3.easePoly.exponent(2),
cubic = d3.easePoly.exponent(3);
svg
.selectAll("rect") // select rects to be updated
.data(data) // New data binded to rects
.transition() // Just this single magical line
.duration(1000) // in milliseconds
.ease(linear) // among cubic, poly, sin, bounce, elastic
ease
反弹效果
// update rect widths with enw data
var linear = d3.easePoly.exponent(1),
quad = d3.easePoly.exponent(2),
cubic = d3.easePoly.exponent(3);
svg
.selectAll("rect") // select rects to be updated
.data(data) // New data binded to rects
.transition() // Just this single magical line
.duration(1000) // in milliseconds
.ease(quad) // among cubic, poly, sin, bounce, elastic
quad
添加延迟
指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。
// update rect widths with enw data
svg
.selectAll("rect") // select rects to be updated
.data(data) // New data binded to rects
.transition() // Just this single magical line
.duration(1000) // in milliseconds
.delay(400) // 延迟
delay
关于代码运行效果
由于在简书上不能展示代码的运行结果，我在网上搭建了一个 jupyter notebook http://jupyter.cyber-life.cn/lab，我将本套教程的笔记和源代码写在了上面，可以在线查看代码运行效果，还可以调试代码，有需要的同学私信我。
