如何让多个 SVG 绘图在滚动到时平滑渲染

Question

我使用 d3.js 库绘制了一个 SVG 折线图网格，其中每个折线图都是包装器内自己的<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 个图表(每个图表都包含大约五条 2 坐标线(，因此有必要滚动到其中的大多数图表以在视口中(在我的情况下是水平的(中揭开它们。但是，一旦执行滚动，视图通常会冻结，并且必须触发某些操作(例如放大或缩小视口或单击某些内容(才能让视口中的当前 SVG 图表正确呈现。

除了减少图表数量之外，我还可以应用任何解决方案来防止此视图冻结发生？

Answer 1

您可以尝试将形状呈现设置为 optimizeSpeed 。您可以通过向路径添加.attr('shape-rendering', 'optimizeSpeed')来执行此操作。