使用d3.js制作动态时间折线图

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秒钟，持续时间应该为一秒钟。这听起来比持续时间为950毫秒的翻译更合理。

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

有人能解释一下这是为什么吗？

- user1474509

---

你有什么期望？我运行了你的fiddle，发现它能在1秒内正常工作。 - Hieu Le

小提琴运行时间为950毫秒。 - user1474509

Answer 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);

这里是可工作的代码链接

希望这能有所帮助！

- Cyril Cherian