Accepted answer

The synchronization issue comes from the fact that you are using a transition to move the circles and not using a transition to update the x-axis. Here's the relevant snippet from the draw function:

  .attr("cx", function(d) { return x(dateFn(d)) })
  .attr("cy", function(d) { return yValueFn(d) });


Because D3 has a default transition duration of 250 milliseconds, the circles are lagging behind the axis, which is updated instantly. You can synchronize the two by reducing the transition duration to 0 like this:


That should make the x-axis and circles move synchronously.

Related Query

More Query from same tag