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])

它有效，但我有一个坏＆＃34;剪辑＆＃34;效果。

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

如何通过转换或类似方法将其删除？

Answer 1

而不是倾听＆＃34;结束＆＃34;转换事件并再次调用tick（）函数，我建议使用javascript提供的requestAnimationFrame（），这将有助于使动画更流畅。如果您按如下方式设置刻度函数：

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

requestAnimationFrame将等待当前的绘图＆＃39;在调用传递给它的函数之前完成，这是函数本身。添加此更改并删除＆＃39; .each＆＃39;从路径选择中，您可能会注意到一个带有变量fps的动画（取决于很多东西）。这个动画的fps可以很容易地控制。您可以按照此处的说明操作：Controlling fps with requestAnimationFrame?

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

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

希望这就是你要找的东西！

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

1 个答案: