score:1

Accepted answer

Your question (I mean, the desired outcome) is not exactly clear, but I guess that you can get what you want using a transition with delay, instead of each:

function colorChange() {
    var color = d3.select("circle").style("fill");
    if (color == "rgb(0, 0, 255)") {
        d3.selectAll("circle")
            .transition()
            .delay((d, i) => i * 50)
            .duration(100)
            .style("fill", "red");

    } else {
        d3.selectAll("circle")
            .transition()
            .delay((d, i) => i * 50)
            .duration(100)
            .style("fill", "blue");
    }
}

Here is the updated code (I changed the interval to 5 secs, just to give time to paint all the circles, so please wait a little bit for the first call): https://bl.ocks.org/anonymous/raw/bf1921449e33d89ba6259167231f5b32/

score:0

This might do what you are trying to achieve:

d3.interval(colorChange, 2000);

function colorChange(){
  var color = d3.select("circle").style("fill");
  if (color == "rgb(0, 0, 255)")
    d3.selectAll("circle").each(function(){
      d3.select(this).style("fill","red");
      // How long to wait in ms
      sleep(100);
    });
  else
    d3.selectAll("circle").style("fill","blue");

}

function sleep(ms) {
   var now = new Date().getTime();
   while(new Date().getTime() < now + ms){ /* do nothing */ } 
}

Related Query

More Query from same tag