06-D3.js过渡动画

D3提供了4个方法用于实现图形的过渡

• transition

图形变化前后的状态（形状、位置、颜色等）

.attr('fill','#c33')
.transition()
.attr('fill','yellowgreen')

• duration()

指定动画过渡的时间（ms）

• ease()

指定过渡的方式，常用的有

1. linear: 普通的线性变化
2. circle: 慢慢地到达变换的最终状态
3. elastic: 带有弹跳地到达最终状态
4. 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