Как сделать так, чтобы несколько рисунков SVG отображались плавно при прокрутке?

Question

Я нарисовал сетку графиков SVG, используя библиотеку d3.js, где каждая линейная диаграмма представляет собой собственный тег <svg> внутри оболочки div, например:

<div id="main-container" style="overflow-x: scroll">

    <div class="wrapper-div" style="transform: translate([dynamicaly calculated])">
        <svg>...</svg>
    </div>

    <div class="wrapper-div" style="transform: translate([dynamicaly calculated])">
        <svg>...</svg>
    </div>

    <div class="wrapper-div" style="transform: translate([dynamicaly calculated])">
        <svg>...</svg>
    </div>
    .
    .
    .
</div>

Поскольку всего 50 диаграмм (каждая из которых включает в себя около пяти двухкоординатных линий), необходимо прокрутить большинство из них, чтобы открыть их в окне просмотра (в моем случае по горизонтали). Однако после выполнения прокрутки представление часто останавливается, и необходимо выполнить какое-либо действие (например, увеличить или уменьшить область просмотра или щелкнуть по чему-либо), чтобы диаграммы SVG, находящиеся в данный момент в области просмотра, правильно отображались.

Помимо уменьшения количества графиков, есть ли какое-либо решение, которое я могу применить, чтобы предотвратить это зависание вида ?

Answer 1

Вы можете попытаться установить рендеринг фигуры на optimizeSpeed. Вы можете сделать это, добавив .attr('shape-rendering', 'optimizeSpeed') к пути.