D3.js - 平移期间数据和轴未同步

Question

我使用D3.js创建了一个散点图，每20秒更新一次。它也可以平移和缩放。问题是平移期间数据滞后于轴。我已经找到了类似实现的示例，但我能找到的只是缩放/平移或间隔，而不是两者。我无法找到问题的根源。我的代码的简化演示可以在这里找到：http://jsbin.com/yurik/1/edit。任何帮助表示赞赏。

Answer 1

同步问题来自于您使用转换移动圆圈而不使用转换来更新x轴。以下是draw函数的相关摘录：

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

svg.selectAll("g.x.axis").call(xAxis);

由于D3有a default transition duration of 250 milliseconds，因此圆圈滞后于轴，会立即更新。您可以通过将转换持续时间减少到0来同步这两者，如下所示：

circles.transition().duration(0)

这应该使x轴和圆圈同步移动。