performance - 画面外の SVG 要素を非表示にする

Question

D3 を使用して、数百の svg 要素をレンダリングしています。ただし、ビューポートで同時に表示できるのはそのうちのいくつかだけです。

そのため、画面外にある要素を削除し、スクロールして表示に戻ったときにそれらを再作成することで、パフォーマンスを向上させることができると考えました。

これは合理的な仮定ですか？

そのようなことに利用できるツールはありますか？

score 1 · Accepted Answer

非表示にしたい SVG 要素のdisplayプロパティを設定するだけです。none

document.getElementById("unwanted").style.display = `none`;

<svg>
    <circle id="wanted" cx="50" cy="50" r="50" fill="red"/>
    <circle id="unwanted" cx="100" cy="100" r="100"/>
</svg>

score 1 · Accepted Answer

より一般的には、要素またはグループの再利用についてdefsおよびを見てください。useたとえば、オブジェクトの「プール」を生成し、移動を適用してそれらをビューポートの内側または外側に配置することができます。

3 に答える 3