在tab处于后台时使用d3.js绘制SVG

最适合我的解决方案非常简单:

一旦应用程序处于后台选项卡或最小化(可以使用 Page Visibility API ),我只更新了我的模型,没有画任何东西。然后,一旦应用程序再次放到前台,我就重新绘制所有内容。这解决了我所有的性能问题。

我遇到了同样的问题,我没有在后台选项卡中进行转换来解决这个问题。

mbostock 显示了一个很好的代码片段 https://github.com/d3/d3-transition/issues/93#issuecomment-516452828

d3.selection.prototype.maybeTransition = function(duration) {
  return duration > 0 ? this.transition().duration(duration) : this;
};

使用方法如下:

selection
  .maybeTransition(document.visibilityState === "visible" ? my_duration : 0)
    .attr(…

捕捉页面可见性事件之后,甚至可以调整转换时间,以减少转换时间(从而加快转换速度),从而在页面没有处于后台选项卡的情况下,以大约相同的时间结束。

您可以通过使用requestAnimationFrame()或监视选项卡可见性来修复此问题,并且只有在选项卡处于活动状态时才使用setInterval()。