How is this working even for keying on index?

compare this with the entry "Could not update this properly..."

HTML

<button id="update">Update My Colors</button>

JavaScript

// read about selections in https://github.com/mbostock/d3/wiki/Selections

data = ["red","green","blue","orange","chocolate"];
updatedata = ["blue","green","red","purple"];
var update = false;

var svg = d3.select("body").append("svg");

draw(data);

d3.select("#update")
    .on("click",function() {draw((update = !update)? updatedata : data);});
                              //toggle the datasets on subsequent clicks

function draw(dataset) {
    var circles = svg.selectAll(".circle")
    .data(dataset);
         //No key function, circle data is matched by index
         //so circles stay in place (since position is based on index).
    
    // enter selection, selection.enter()
    circles.enter()
        .append("circle")
        .attr("class", "circle") // set the class attribute...good practice
        .attr("transform", "translate(20)")
        .attr("opacity", 1)
        .attr("r", 0); //to more clearly show the transitions
    
    // update selection
    circles.transition().duration(750)
        .attr("cy", 30)
        .attr("cx", function(d,i) {return i * 50;})
        .attr("r", 20)
        .style("fill", function(d) {return d;});
    
    // exit selection, selection.exit()
    circles.exit().transition().duration(750)
        .attr("opacity", 0)
        .remove();
}