javascript - 使用 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 毫秒的翻译更合乎逻辑。

如果我在第 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

希望这对您有所帮助!