JSFiddle - React, Tailwind, and code Playground

HTML

<svg/>

JavaScript

// set delay for second transition explicitly
d3.select("svg").append("circle")
    .attr("transform", "translate(20,20)")
    .attr("r", 20)
    .attr("fill", "black")
    .transition().duration(1000)
    .attr("fill", "orange")
    .transition().delay(1500).duration(500)
    .attr("fill", "blue");

// attach second transition only when the first one ends
d3.select("svg").append("circle")
    .attr("transform", "translate(100,20)")
    .attr("r", 20)
    .attr("fill", "black")
    .transition().duration(1000)
    .attr("fill", "orange")
    .each("end", function() {
        d3.select(this)
        .transition().delay(500).duration(500)
        .attr("fill", "blue");
    });

d3.select("svg").append("circle")
    .attr("transform", "translate(180,20)")
    .attr("r", 20)
    .attr("fill", "black")
    .transition().duration(1000)
    .attr("fill", "orange")
    .transition().duration(1000)
    .attr("fill", "blue");