title: d3 Animations cause slow behavior
body: <p>I'm using d3 to display a heatmap. Each cell on the floor is represented by a rect in the drawing.  Checkboxes on the right allow users to filter out some of the rects, which causes an opacity change transition of about 1 second.  </p>
  
  <p>Every once in a while (~25% of the time), toggling the display of a large set of cells causes the browser (chrome) to come to a halt.  The page freezes up, the CPU fan starts screaming, and 10-20 seconds later, the cells disappear and everything is back to normal.</p>
  
  <p>Any idea what could be causing this?  There are 7679 cells on the drawing, with varying transparency and some overlapping.  </p>
  
  <p><img src="https://i.stack.imgur.com/63GWB.png" alt="heatmap"></p>
  
  <pre><code>//-------------------------------------------------------------
  //Create cells  
  //-------------------------------------------------------------
  var cells = svg.selectAll("rect").data(drawingData, function (d) { return d.id;});
  cells.enter()
      .append("rect")
      .attr("x",              function(d) { return xScale(d.x); })
      .attr("y",              function(d) { return yScale(d.y); })
      .attr("width",          function(d) { return 4; })
      .attr("height",         function(d) { return 5; })
      .attr("fill",           function(d) { return channelcolors[d.channel]; })
      .attr("fill-opacity",   function(d) { return rssiScale(d.rssi_val); });
  
  cells.exit()
      .transition()
      .duration(1000)
      .ease("linear")
      .style("opacity", 0)
      .remove();
  </code></pre>