D3 Examples - Weird remove bug

Weird remove bug

This is probably a problem in my colorbar.js. When I am transitioning between two instances of colorbar, the exiting chunks don't appear to get removed before the transition ends and the next one start.

I have found that adding a delay of 1000 allows the remove to finish before the next tick starts. Though I have also noticed that the problem is intermitent (with delay of 0).

Ideas? Can anyone spot my bug? You may have to refresh the page a few times to catch it.

bar, bar.enter() and bar.exit() selections are in the console.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title>Color bar</title>
    <link type="text/css" rel="stylesheet" href="colorbar.css"></link>
    <script type="text/javascript" src="https://d3js.org/d3.v2.min.js"></script>
    <script type="text/javascript" src="colorbar.js"></script>
  </head>
  <body>    
    <script type="text/javascript">
var svg = d3.select("body").append("svg")
    .attr("width", 1000)
    .attr("height", 1000),
g = svg.append("g").attr("transform","translate(100,100)").classed("colorbar",true),
blarg = 0,
cb1 = colorBar().color(d3.scale.linear().domain([-1, 0, 1]).range(["red", "green", "blue"])).size(300).lineWidth(80).precision(3),
cb2 = colorBar().color(d3.scale.linear().domain([-1, 0, 1]).range(["red", "white", "blue"])).size(500),
delays = [1000,0];
​
function tick(){
    var svgt = g.transition().duration(500).ease("linear").call([cb1,cb2][blarg%2]);
    if (blarg++ < 3){
        svgt.delay(delays[Math.floor(blarg/2)]).each("end",tick)
            }}
​
tick();
​
    </script>
  </body>
</html>
    