d3入门练习系列（二） 背景色渐变

渐变效果

示例

实现页面从白色背景过度到蓝色

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。