2

ヒートマップを表示するために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();
4

1 に答える 1

3

右、7679 個のオブジェクト。一度にフェードイン/フェードアウトするにはオブジェクトが多すぎます。JavaScript側で行き詰まります(一度に非常に多くの変更を実行する必要があります)。そして、形状には透明度があるため、レンダラーはそれらすべてを合成する必要があり、それも殺されます。

明らかに、最も単純で負担の少ないオプションは、移行をまったく行わないことです。

しかし、試してみる価値のある複雑なオプションの 1 つは、うまくいくかもしれないしうまくいかないかもしれませんが、フェードイン/フェードアウトする必要があるすべての四角形を一時的に単一のグループに転送し、グループ全体を (つまり、個々のセルではなく) フェードすることです。 )。

それ以外に、トランジションの開始時間をずらしてみることができます。つまり、各セルの遷移には、i (セルのインデックス) の倍数の遅延があります。このようにして、特定の瞬間に、セルの一部のみが遷移されます。しかし、各セルのアニメーションの 1000 ミリ秒の持続時間は長すぎます。100ミリ秒以上になるはずです。

于 2012-09-28T04:27:29.977 に答える