How to fix replaying transitions in d3 v4? - d3.js

Question

I'm implementing a chart using d3 that has a sliding x axis. Demo
The problem is, when I change to another tab, and then go back (say after 10 seconds), d3 seems to try to replay the missing transitions, which results in a very awkward behavior of the axis. See here.
Mike Bostock mentions that:
D3 4.0 fixes this problem by changing the definition of time. Transitions don’t typically need to be synchronized with absolute time; transitions are primarily perceptual aids for tracking objects across views. D3 4.0 therefore runs on perceived time, which only advances when the page is in the foreground. When a tab is backgrounded and returned to the foreground, it simply picks up as if nothing had happened.
Is this really fixed? Am I doing anything wrong?
const timeWindow = 10000;
const transitionDuration = 3000;
const xScaleDomain = (now = new Date()) =>
[now - timeWindow, now];
const totalWidth = 500;
const totalHeight = 200;
const margin = {
top: 30,
right: 50,
bottom: 30,
left: 50
};
const width = totalWidth - margin.left - margin.right;
const height = totalHeight - margin.top - margin.bottom;
const svg = d3.select('.chart')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight)
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`)
svg
.append('rect')
.attr('width', width)
.attr('height', height);
// Add x axis
const xScale = d3.scaleTime()
.domain(xScaleDomain(new Date() - transitionDuration))
.range([0, width]);
const xAxis = d3.axisBottom(xScale);
const xAxisSelection = svg
.append('g')
.attr('transform', `translate(0, ${height})`)
.call(xAxis);
// Animate
const animate = () => {
xScale.domain(xScaleDomain());
xAxisSelection
.transition()
.duration(transitionDuration)
.ease(d3.easeLinear)
.call(xAxis)
.on('end', animate);
};
animate();
svg {
margin: 30px;
background-color: #ccc;
}
rect {
fill: #fff;
outline: 1px dashed #ddd;
}
<script src="https://unpkg.com/d3#4.4.1/build/d3.js"></script>
<div class="chart"></div>

Answer 1

The problem is not D3 transitions. The problem here is new Date().
Every time you go to another tab, the transition pauses. So far, so good. But when you come back to the chart, let's say, after 20 seconds, you get a new date that's the current date... however your timeWindow is the same, as well as your transitionDuration:
const timeWindow = 10000;
const transitionDuration = 3000;
const xScaleDomain = (now = new Date()) => [now - timeWindow, now];
That makes the axis jump ahead faster, because the difference between the old and new values at any point in the domain is not 3 seconds anymore.
Here is a very simple solution, too crude and requiring improvements, just to show you that the problem is new Date(). In this solution (again, far from perfect), I manually set the date in each animation to jump 10 seconds, no matter how long you stay in another tab:
var t = xScale.domain()[1];
t.setSeconds(t.getSeconds() + 10);
xScale.domain([xScale.domain()[1], t]);
Here is the CodePen: http://codepen.io/anon/pen/GrjMxy?editors=0010
A better solution, using your code, would be changing timeWindow and transitionDuration to take into consideration the difference between the new new Date() and the old new Date() (that is, how long the user has been in another tab).