Axis labels are not removed from the DOM about d3-axis

[mbostock]

The problem is that when the end event for the parent G element is dispatched, the axis has not yet removed the old ticks. The ticks are removed by transition.remove, which listens for the end event on the tick elements. The end event for the G element is dispatched prior to the end event for the tick elements, so you are starting a new transition that interrupts the old one before the axis has a chance to remove the old ticks.

If you want a real-time axis, you probably don’t want transitions. Instead, use d3.timer and redraw the axis with every tick.

var x = d3.scaleTime()
    .range([0, width]);

var xAxis = d3.axisBottom(x);

var xG = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(xAxis);

d3.timer(function() {
  var now = Date.now();
  x.domain([now - 10 * 6000, now]);
  xG.call(xAxis);
});

If you want an infinitely-chaining transition, then either you should wait until after the end event to start your new transition (such as by using d3.timeout), or you should d3.active and transition.transition to schedule a chained transition that will not interrupt your current transition. That would look like this:

var x = d3.scaleTime()
    .domain(interval(0))
    .range([0, width]);

var xAxis = d3.axisBottom(x);

svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(xAxis)
  .transition()
    .duration(1000)
    .ease(d3.easeLinear)
    .on("start", animate);

function animate() {
  x.domain(interval(1000));

  d3.active(this)
      .call(xAxis)
    .transition()
      .on("start", animate);
}

function interval(offset) {
  var now = Date.now() + offset;
  return [now - 10 * 6000, now];
}

https://bl.ocks.org/mbostock/e82068fbaf4f2d75549c4a480b28f643

The main thing I don’t like about the latter approach is that if you background the tab, when you return to the foreground, it will do a 1-second linear transition to the current time interval, so the axis will slide very quickly as it returns to the current time. It’d probably be better to just draw the axis in realtime as under the first approach.

[curran]

If you change the following line

    .on('end', animate);

to

    .on('end', function (){ setTimeout(animate); });

, then the number of elements remains 10 (10 gets printed again and again).

Here's an updated demo.

I made this change purely on intuition, I don't fully understand why this fixes the problem. Probably something to do with asynchronous control flow and how the exit() part of the axes is implemented.

[moroshko]

Thanks Mike for such a detailed response!