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 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.

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.