D3提供了4个方法用于实现图形的过渡
- transition
图形变化前后的状态（形状、位置、颜色等）
.attr('fill','#c33')
.transition()
.attr('fill','yellowgreen')
- duration()
指定动画过渡的时间（ms）
- ease()
指定过渡的方式，常用的有
- linear: 普通的线性变化
- circle: 慢慢地到达变换的最终状态
- elastic: 带有弹跳地到达最终状态
- bounce: 在最终状态处弹跳几次
.ease(d3.easeCircleIn)
.ease(d3.easeElasticOut)
.ease(d3.easeBounceOut)
- delay()
指定动画开始前，延迟的时间（ms）
.transition()
.duration(1000)
.delay(500)
实现简单的动态效果
在 SVG 画布里添加三个圆，圆出现之后，立即启动过渡效果。
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
console.log(`width,height`, width, height)
// 在body中添加一个SVG画布
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
var circle1 = svg.append('circle')
.attr('cx', 100)
.attr('cy', 100)
.attr('r', 45)
.style('fill', 'yellowgreen')
var circle2 = svg.append('circle')
.attr('cx', 100)
.attr('cy', 200)
.attr('r', 45)
.style('fill', 'blue')
var circle3 = svg.append('circle')
.attr('cx', 100)
.attr('cy', 300)
.attr('r', 45)
.style('fill', 'pink')
// 在1S内，将圆心横坐标由100变为300
circle1.transition()
.duration(1000)
.attr('cx', 300)
// 在1.5S内，将圆心坐标由100变为300
circle2.transition()
.duration(1500)
.attr('cx', 300)
.style('fill', 'red')
// 同时移动横坐标、改变颜色和半径
circle3.transition()
.duration(2000)
.ease(d3.easePolyInOut)
.attr('cx', 300)
.attr('r', 20)
.style('fill', 'purple')
给柱状图加上动态效果
- 在添加文字元素和矩形元素时，启动过渡效果，让各柱形和文字缓慢升到目标高度。
.attr('y', function (d) {
return yScale(d)
})
文字元素的过渡前后，发生变化的是 y 坐标。其起始状态是在 y 轴等于 0 的位置（但要注意，不能在起始状态直接返回 0，要应用比例尺计算画布中的位置）。终止状态是目标值。
.attr('y', function (d) {
var min = yScale.domain()[0]
return yScale(min)
})
.transition()
// 每个元素，一次往后延迟200ms
.delay(function (d, i) {
return i * 300;
})
.duration(2000)
.ease(d3.easePolyInOut)
.attr('y', function (d) {
return yScale(d)
})
效果.gif
