ヒートマップを表示するためにd3を使用しています。床の各セルは、図面では長方形で表されています。右側のチェックボックスを使用すると、ユーザーは一部の四角形を除外できます。これにより、不透明度が約1秒変化します。
ときどき(時間の約25%)、セルの大きなセットの表示を切り替えると、ブラウザー(クロム)が停止します。ページがフリーズし、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();