转换是动态操作
转换是从一个start状态转换为end的一个动态过程. 例如我们将页面的背景色从green转换为red.
d3.select('body')
.style('background-color', 'green')
.transition()
.delay(1000)
.style('background-color', 'red');
我们可以监听transition的start/end事件:
d3.select('body')
.transition()
.delay(1000)
.on('start', function() { d3.select(this).style('background-color', 'green')})
.style('background-color', 'red')
.on('end', () => console.log('end...'));
更简单的方法在于使用类似styleTween/attrTween的方法(不确定是否常用):
d3.select('body').transition()
.styleTween('background-color', () => d3.interpolate('green', 'red'));
针对d3.interpolate, 它需要知道给予参数的合理性(例如('green', 'red'), 则颜色从green过渡到red). 目前规则如下:
- numbers
- colors
- geometric transforms
- strings with embedded numbers(例如"96px")
但如果是自己实现interplator, 则需要类似下列的写法: 保证t=0时候返回a, t=1时候返回b:
function interpolateNumber(a, b) {
return function(t) {
return a + t * (b - a);
}
}
转换的生命周期
周期分为四个部分:
- 转换写入计划表
- 转换开始start
- 转换运行run
- 转换结束end
当我们写selection.transition时候, 转换就写入计划表中. 则start在delay后面运行; 否则start会尽可能快的运行. 当执行run情况下, 它会重复调用t从0~1所返回的值. 当t=1的时候, 执行end操作.
实例: 在enter/update/exit中执行transition
const width = 960;
const height = 500;
const x = d3.scalePoint()
.domain([0, 1, 2])
.range([height / 4, width - height / 4]);
const svg = d3.select('svg');
let circle = svg.selectAll('circle')
.data([0, 1])
.enter().append('circle')
.attrs({
r: height / 4,
cx: x,
cy: height / 2
});
setTimeout(() => {
circle = circle.data([1, 2], d => d);
circle.transition().duration(750)
.attr('r', height / 3)
.style('fill', 'orange');
circle.enter().append('circle')
.attrs({
r: height / 4,
cx: x,
cy: height / 2
})
.style('fill', 'green');
circle.exit().transition()
.attrs({
r: 1e-6,
fill: 'red'
})
.remove();
}, 1000)
- 使用d3.scalePoint, 将domain和range对应起来.
- 预先绘制[0, 1]两个黑色的圆圈, 以750毫秒的速度绘制[1, 2]两个圆圈, 半径调整为height / 3, 颜色设置为橘色.
- 将新增的2号圆圈, 半径设置为height / 4, 并且颜色为green.
- 将0号圆圈的半径设置为1e-6, 填充红色, 并删除.
源码
https://github.com/leicj/d3/blob/master/src/components/transition.js
