So far attributes have been applied instantly, which is great for rendering an image, but what if we want to highlight something with a simple animation? Perhaps we just want a smoother transition from nothing to "Hey, graph!" while loading external data?
That's where transitions come in. Transitions use the familiar principle of changing a selection's attributes, except that changes are applied over time.
To slowly turn a rectangle red, we'd use the following line of code:
d3.select('rect').transition().style('fill', 'red');We start a new transition with .transition() and then define the final state of each animated attribute. By default, every transition takes 250 milliseconds; you can change the timing with .duration(). New transitions are executed on all properties simultaneously unless you set a delay using .delay().
Delays are handy when we want to make transitions happen in sequence. Without a delay, they are all executed at the same time, depending on an internal...