如何通过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。 您可以按照以下说明进行操作： 使用requestAnimationFrame控制fps？

另外，请尝试完全删除过渡，看看是否更喜欢

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

希望这就是您想要的！