title: d3.js transition().remove() not working
body: <p>I have a problem with a visualization in d3.js.</p>
  
  <p>I have three groups containing almost identical visualizations, being a take on "multiple small" visualizations. The visualization incorporates a timeline, upon change of which appropriate data points have to be added/removed. Here's the code that does the updating:</p>
  
  <pre><code>var channels = { bt: { x: 0, y: -100 }, sms: { x: -300, y: 200 }, call: { x: 300, y: 200 } };
          //Draw web for each channel
          for (channel in channels) {
              this.circles[channel] = this.web[channel].selectAll("circle")
                     .data(this.displayedNodes, function (d) {
                         return d.id;
                     });
  
              this.circles[channel].exit().transition().duration(500).attr("r", 0).remove();
  
              this.circles[channel].enter()
                     .append("circle")
                     .attr("class", "person")
                     .attr("r", 0)
                     .attr("cx", function (d) {
                         return d.friendScales[channel](chart.minScores[channel]).x;
                     })
                     .attr("cy", function (d) {
                         return d.friendScales[channel](chart.minScores[channel]).y;
                     })
                     .attr("fill", function (d) {
                         //return chart.clusterColors[d.cluster];
                         return chart.colors[channel];
                     })
                     .attr("stroke-width", 2)
                     .attr("stroke", function (d) {
                         return d3.rgb(chart.colors[channel]).darker();
                     })
                     .attr("id", function (d) {
                         return "bubble_" + d.id;
                     })
                     .on("mouseover", function (d, i) {
                         return chart.show_details(d, i, this);
                     })
                     .on("mouseout", function (d, i) {
                         return chart.hide_details(d, i, this);
                     });
          }
  </code></pre>
  
  <p>The .exit().transition().remove() part does nothing, the circles just slide away, as their data value is now 0. However if I open the Chrome console and manually type in exactly the same thing this evaluates to, it works fine. I assume this has something to do with JavaScript's asynchronous model, I'm not a JS wiz, so I am a bit at a loss here, this should be fine in any other language...</p>
  
  <p>Any ideas are much appreciated!</p>
  
  <p>To add from the comments, as they are becoming huge:</p>
  
  <p>Working example: <a href="http://www.student.dtu.dk/~s103826/" rel="nofollow">http://www.student.dtu.dk/~s103826/</a>
  Code: <a href="https://github.com/haljin/d3-webchart/blob/master/Sensible/js/WebChart.js" rel="nofollow">https://github.com/haljin/d3-webchart/blob/master/Sensible/js/WebChart.js</a></p>
  
  <p>To see the problem: Drag the grey rectangle on the timeline (resize by draggin edges) onto the area at the end, that does not have data - the circles should disappear as per <code>exit().transition().remove()</code> but don't. If I set a break point at that area however and type the same in the Chrome console, they do.</p>