Javascript d3动画会导致动作缓慢

我用d3来显示热图。地板上的每个单元在图形中都由一个矩形表示。右边的复选框允许用户过滤掉一些矩形，这会导致大约1秒的不透明度更改转换

每隔一段时间（约25%的时间），切换一大组单元格的显示会导致浏览器（chrome）停止。页面冻结，CPU风扇开始尖叫，10-20秒后，细胞消失，一切恢复正常

你知道这是什么原因吗？图形上有7679个单元，具有不同的透明度和一些重叠

//-------------------------------------------------------------
//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();

---

对，7679个对象。这是太多的对象，无法一次全部淡入/淡出。它在javascript方面陷入困境（不得不一次执行这么多更改）。然后，由于形状具有透明度，渲染器必须将它们全部合成，并且也会被杀死

显然，最简单、最省力的选择是根本不进行过渡

但是，一个值得尝试的复杂选项——可能有效，也可能无效——是将所有必须淡入/淡出的矩形临时转移到单个组中，然后将组作为一个整体淡出（即不是单个单元格）

除此之外，您可以尝试错开过渡的开始时间。也就是说，每个单元的转换都有一个延迟，是i（单元索引）的倍数。这样，在任何给定的时刻，只有一部分细胞被转换。但每个细胞1000毫秒的动画持续时间太长了。应该更像100毫秒