d3动画导致行为缓慢

Question

我使用d3显示热图。地板上的每个单元格由图中的矩形表示。右侧的复选框允许用户过滤掉一些rects，这会导致不透明度变化转换大约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();

Answer 1

对，7679个对象。这太多的对象一下子就消失了。它在javascript方面陷入困境（必须立即执行如此多的更改）。然后，因为形状具有透明度，渲染器必须将它们全部合成并且它也会被杀死。

显然，最简单，最不费力的选择就是根本不进行过渡。

但是，一个值得尝试的复杂选项 - 它可能会或可能不会起作用 - 是暂时将所有必须淡入/淡出的部分转移到单个组中，然后将整个组淡化（即不个别细胞）。

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