使用d3.js移动线条时间图

我使用d3.js创建一个显示数据的图形，该线条在线形图中定期更新（每秒一次）。 x轴（时间）和整个图形不断转换到左侧。使用d3.js移动线条时间图

我试图将它基于本教程：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毫秒更合乎逻辑。

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

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

来源

2015-12-15 user1474509

您的期望是什么？我跑你的小提琴，并看到它的作品与持续时间1秒。 –

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

原因是你在呼唤每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.1sec）

setInterval(update, 1100);

工作代码here

希望这有助于！

来源

2015-12-15 06:25:21 Cyril

使用d3.js移动线条时间图

回答

相关问题