Published Dec 12, 2023
Contribute to Docs

The .delay() method is used in the context of transitions and sets the delay before the transition starts.


  • delayValue - It is the time delay in milliseconds.


In the following example, the circles start with different radii and then transition to a radius of 30 after a short delay.

let circles = d3
.data([5, 15, 25]) // Example data for circle radius
.attr('cx', (d, i) => i * 50 + 30)
.attr('cy', 100)
.attr('r', (d) => d)
.attr('fill', 'black');
// Transition to change the radius with a delay
.delay(3000) // Introduce a delay of 3000 milliseconds (3 seconds)
.attr('r', 30); // Change the radius attribute during the transition

The example will result in the following output:


All contributors

Looking to contribute?

Learn JavaScript:D3 on Codecademy