javascript - 如何使用 D3.JS 中的转换更新 Y 域？

Question

我必须显示一个不断增长的折线图，每 100 毫秒更新一次。我找到了一种正确更新数据的方法:

path
    .attr("d", line)
    .attr("transform", null)
    .transition()
    .duration(100)
    .ease("linear")
    .attr("transform", "translate(" + x(0) + ",0)")
    .each("end", tick);

但是我对 Y 轴域有疑问。

我这样定义 Y 轴:

var y = d3.scale.linear()
    .domain([-1, 1])
    .range([height, 0]);

然后我在每次刷新时使用指令更新它:

y.domain([avg - 10, avg + 10])

它有效，但我的“剪辑”效果很差。

演示: https://jsfiddle.net/j499oy0e/

如何通过过渡或类似的方式删除它？

Answer 1

我建议使用javascript提供的requestAnimationFrame()，而不是监听转换的“结束”事件并再次调用tick()函数，这将有助于使动画更流畅。如果您按如下方式设置勾选功能:

function tick(){
  requestAnimationFrame(tick);
  //...rest of the code
}

将会发生的情况是，requestAnimationFrame 将等待当前的“绘图”完成，然后再调用传递给它的函数(即函数本身)。添加此更改并从路径选择中删除“.each”后，您可能会注意到具有可变 fps 的动画(取决于许多因素)。该动画的 fps 可以非常容易地控制。您可以按照此处的说明进行操作:Controlling fps with requestAnimationFrame?

此外，尝试完全删除过渡，看看您是否更喜欢它

path
.attr("d", line)
.attr("transform", "translate(" + x(0) + ",0)");

希望这就是您正在寻找的!