渐变效果
示例
实现页面从白色背景过度到蓝色
var t = d3.transition()
.duration(2000);
d3.select("body").transition(t).style("background-color", "lightblue");
如果只想改变某个div的背景色，只需要修改d3.select就可以了。想类选择器和ID选择器那样使用。
更有趣的玩法
示例
实现在红、黄、蓝三个颜色之间切换渐变，切换一千次
const colors = ['red', 'yellow', 'blue']
let j = 0
function* _sf(i) {
while(j < i) {
let color = colors[j % 3]
let t = d3.transition()
.duration(2000)
d3.select('body').transition(t).style("background-color", color);
j += 1
yield
}
}
const a = _sf(1000)
setInterval(() => {
a.next()
}, 2000)
在这个示例中，我使用了生成器函数function*。
然后调用此函数并传入限定值1000，创建了一个生成器a。
然后再定时通过next去执行一次函数内部的代码，当遇到yield时，会暂停执行，直到下一次next。