CODEWITHSUNDEEP
javascriptcssperformanced3.jssvg
JoeBe
JoeBe

Reputation: 1290

How to let multiple SVG drawings render smoothly when scrolled to?

I have drawn a grid of SVG line charts using the d3.js library, where each line chart is an own <svg> tag inside a wrapper div 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>

Because there are 50 charts in total (each of them includes appr. five 2-coordinate lines), it is necessary to scroll to most of them to unveil them in the viewport (in my case horizontally). However, once scrolling is performed the view often freezes and some action must be triggered (e.g. zoom in or out the viewport or clicking on something) to let the SVG charts currently in the viewport render correctly.

Besides decreasing the number of charts, is there any solution I can apply to prevent this view freezing from happening?

Upvotes: 1

Views: 83

Answers (1)

jsand3k
jsand3k

Reputation: 134

You could try to set shape-rendering to optimizeSpeed. You can do that by adding .attr('shape-rendering', 'optimizeSpeed') to the path.

Upvotes: 1

Related Questions