d3 动画导致行为缓慢答案

【问题标题】：d3 Animations cause slow behaviord3 动画导致行为缓慢
【发布时间】：2012-09-27 20:55:20
【问题描述】：

我正在使用 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();

【问题讨论】：

标签： javascript animation d3.js transition

【解决方案1】：

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

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

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

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

【讨论】：