gradient effect
example
Realize the page transition from white background to blue
var t = d3.transition()
.duration(2000);
d3.select("body").transition(t).style("background-color", "lightblue");
If you only want to change the background color of a certain div, you only need to modify d3.select. Use it like class selectors and ID selectors.
More interesting ways to play
example
Realize switching gradients among the three colors of red, yellow, and blue, switching a thousand times
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)
In this example, I use the generator function function*.
Then call this function and pass in the limit value 1000 to create a generator a.
Then execute the code inside the function through next at regular intervals. When yield is encountered, the execution will be suspended until the next next time.