d3.js transition（）在浏览器被最小化时不工作 [英] d3.js transition() not working when browser is minimised

问题描述

当新数据传入时，用于移动 svg 元素位置的 transition（） 选项在浏览器窗口是打开的，但是当我打开另一个标签或最小化窗口时， transition（） 函数会将 svg 元素堆叠在一起。当我打开窗口，我看到堆叠的 svg 元素在彼此的顶部。

The transition() selection which i use to shift the position of svg elements when new data comes in, works perfectly when browser window is open but when I open another tab or minimize the window, the transition() function piles the svg elements on top of each other. when i open the window i see piled up svg elements on top of each other.

/ strong> 选择移出屏幕。

推荐答案

D3 使用requestAnimationFrame 启用平滑有效的绘图。这是有关主题的更多信息。

D3 uses requestAnimationFrame to enable smooth and efficient drawing. Here is more info on the topic.

许多人都有的基本问题是，当窗口/选项卡在后台时，页面呈现进入睡眠模式，并且不提供动画帧，即浏览器将停止绘制。

The basic problem many people have is, when a window/tab is in the background, the page rendering "goes to sleep mode" and no "animation frames" are provided, i.e., the browser will stop drawing.

您可以使用浏览器来解决这个问题。 visibility API 以控制您的绘图（例如，在网页再次变为可见时，对图表进行完整更新 ）。
有关示例，请参见相关的MDN页面。

You can work around that "problem" by using the browsers visibility API to control your drawing (e.g., do a complete update of your charts when the page becomes visible again). See the related MDN page for examples.

这篇关于d3.js transition（）在浏览器被最小化时不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！