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

Я нарисовал сетку линейных диаграмм 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, находящиеся в настоящее время в окне просмотра, отображались правильно.

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