D3 Transitions interrupted

by findango

HTML

<svg id="canvas" width="500" height="500"></svg>

JavaScript

var group = d3.select("#canvas").append("g");

var i;
for(i=0; i < 10; i++) {
    group.append("rect")
        .attr({
            width: 100, 
            height:100, 
            x: (Math.random() * 300) + 50, 
            y: (Math.random() * 300) + 50
        })
        .style({
            stroke:"black",
            fill:"none"
        })
}

group.selectAll("rect")
    .transition().duration(10000)
    .attr({
        x: function(){ return (Math.random() * 300) + 50;}, 
        y: function(){ return (Math.random() * 300) + 50;}
    });

setTimeout(function(){
    d3.selectAll("g rect")
        .transition().duration(5000)
        .style({
            stroke: "blue",
            fill: "blue"
        });
}, 2000);