如何在D3.JS中使用转换更新Y域

How to update the Y domain with a transition in D3.JS?

本文关键字：转换 更新 D3 JS      更新时间：2023-09-26

我必须显示每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/

如何用过渡或类似的东西删除它?

与其监听过渡的"end"事件并再次调用tick()函数，我建议使用javascript提供的requestAnimationFrame()，这将有助于使动画更流畅。如果您按照如下方式设置tick函数:

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

将发生的是requestAnimationFrame将等待当前的"绘图"完成之前调用传递给它的函数，这是函数本身。添加此更改并删除'。从路径选择中，你可能会注意到一个带有可变FPS的动画(取决于许多东西)。这个动画的fps可以很容易地控制。用requestAnimationFrame控制fps ?

同样，试着完全删除过渡，看看你是否更喜欢

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

希望这是你正在寻找的!

相关文章：