javascript - 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 轴和圆同步移动。