javascript - d3.js transition() not working when browser is minimised

Question

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.

The exit() selection moves out of screen however.

Answer 1

D3は requestAnimationFrameを使用して、スムーズで効率的な描画を可能にします。このトピックの詳細については、こちらをご覧ください。

多くの人が抱える基本的な問題は、ウィンドウ/タブがバックグラウンドにある場合、ページ レンダリングが「スリープ モードになり」、「アニメーション フレーム」が提供されないことです。つまり、ブラウザが描画を停止します。

この「問題」は、ブラウザーの可視性 APIを使用して描画を制御することで回避できます (たとえば、ページが再び表示されるようになったときにグラフを完全に更新します)。例については、関連する MDN ページを参照してください。