使用 d3.js 移动线时间图答案

【问题标题】：Moving line timegraph with d3.js使用 d3.js 移动线时间图
【发布时间】：2015-12-15 04:29:15
【问题描述】：

我正在使用 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 秒（就像在教程中一样），我会收到图形错误，并且它不再按预期工作。

谁能给我解释一下，为什么会这样？

【问题讨论】：

您的期望是什么？我运行你的小提琴，发现它的持续时间为 1 秒。
小提琴运行时间为 950 毫秒。

标签： javascript d3.js svg

【解决方案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(1sec) 将更新速率设置为 1 秒多一点，比如（1.1 秒）

setInterval(update, 1100);

工作代码here

希望这会有所帮助！

【讨论】：