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

Question

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

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

Вы можете просто установить для display свойство none для любого элемента SVG, который вы хотите скрыть.

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>