d3.js - 返回页面时如何阻止D3.js阻塞

Question

我目前有一个 Web 应用程序，它使用原生 d3 图表和使用 c3.js 图表模块的图表。

由于数据变化，我的图表每 1-2 秒更新一次，屏幕上可能同时显示 3-4 个图表。

我注意到，如果我在 chrome 中更改选项卡或最小化窗口，当我返回选项卡时，d3.js 会在 d3_timer_step 中花费很长时间，完全锁定 UI 5 秒以上(取决于多长时间用户离开选项卡)，如果用户离开 30 分钟左右，这实际上可以将 UI 锁定很多分钟。

我假设正在发生的事情是 d3 动画在窗口模糊时排队，然后在它再次聚焦时只是锤击 UI 线程。

显然，当窗口不可见时，我可以(并且可能无论如何)停止更新我的图表，但我的问题是是否有其他人发现了这个问题，他们的解决方案是什么？例如d3 中是否有限制动画缓冲区或类似选项的选项？

Answer 1

在我的例子中，0.4.11 没有改变任何东西(甚至 chart.destroy() 也没有做任何令人惊讶的事情)。核心问题是 c3js 继续安排 d3 转换，即使此刻模糊和破坏。 D3 在其一侧推迟所有转换，直到选项卡获得焦点，然后 BAM - 在单个阻塞请求中执行每个转换。

如果是这种情况，您可以将图表的全局转换持续时间更改为 0 或 null。大多数内部 c3 函数都依赖转换持续时间作为标志来执行或不执行转换(在 0 的情况下)。