Скрытие от экрана элементов SVG

Question

Я использую D3 для рендеринга нескольких сотен элементов SVG. Однако лишь немногие из них видны одновременно в окне просмотра.

Поэтому я подумал, что, возможно, смогу повысить производительность, удалив те элементы, которые находятся за пределами экрана, и воссоздадим их, когда они прокручиваются обратно в поле зрения.

Это разумное предположение?

Есть ли инструменты для такой вещи?

Answer 1

Если вы просто обеспокоены тем, что они невидимы, вы можете создать экземпляры тех, которые вам не нужны, за пределами элемента, а затем transform("translate(x, y)") их в поле зрения, когда они вам нужны.

Если вы не хотите, чтобы они существовали, пока они вам не понадобятся, сохраните их атрибуты (включая начальную позицию и все остальное, что вам нужно) в массиве объектов и создайте их экземпляры на экране в их начальной позиции. Это даст лучшее преимущество в производительности.

Answer 2

В целом, посмотрите на defsа также use для повторного использования элемента или группы. Вы можете сгенерировать "пул" объектов и применить перевод, чтобы разместить их, например, внутри или снаружи области просмотра.

Answer 3

Вы можете просто установить display собственность на none for any SVG element you want to hide.

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>