Question

我使用d3.js创建一个显示数据的图表，该图表在折线图中定期更新（每秒一次）。 x轴（时间）和整个图形连续平移到左侧。

我尝试将其基于本教程：http://bost.ocks.org/mike/path/

这个jsfiddle是我到目前为止所得到的： http://jsfiddle.net/panbert/dmynvjzx/

有效。但是在更新方法（Javascript部分中的最后一个方法）

//move the graph left
svg.selectAll(".line")
  .attr("d", line(data))
  .attr("transform", null)
  .transition()
  .duration(950)
  .ease("linear")
  .attr("transform", "translate(" + (x(0) - x(1000)) + ")");

我使用950毫秒的持续时间进行过渡，将图形向左翻译1秒。在教程中，转换的延迟是1秒，这对我来说更有意义。每隔一秒，图表将被移动1秒左右，翻译的持续时间应为1秒。这听起来比翻译需要950毫秒更合乎逻辑。

如果我在第161行将jsfiddle中的翻译持续时间增加到1秒（就像在教程中一样），我会遇到图形错误，并且它不再像预期的那样工作。

任何人都可以向我解释，为什么会这样？

Answer 1

原因是你每1秒后调用一次更新功能

setInterval(update, 1000);

转换的持续时间是

svg.selectAll(".line")
      .attr("d", line(data))
      .attr("transform", null)
      .transition()
      .duration(950)//this means that the transition will take 950 mili secs which is less than the update rate.

但是，如果您在1秒内完成更新，则不会为您提供跳转效果，因为过渡没有结束，并且您正在使用新值更新路径。

svg.selectAll(".line")
      .attr("d", line(data))
      .attr("transform", null)
      .transition()
      .duration(1000)//this means that the transition will take 1000

所以最好的方法是，当你给出持续时间1000（1秒）提供更新率超过1秒说（1.1秒）

setInterval(update, 1100);

工作代码here

希望这有帮助！

用d3.js移动行时间图

1 个答案: