I created a layout of SVG line charts using the d3.js library. Each line chart is contained within its own <svg> tag inside a wrapper div structured like this:
<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>
With a total of 50 charts (each containing about five 2-coordinate lines), I find that scrolling is necessary to view most of them in the viewport, especially horizontally. However, after scrolling, the view often freezes and requires some action to trigger rendering - such as zooming or clicking on elements.
Aside from reducing the number of charts, are there any solutions available to prevent this freezing of the view?