如何用D3.JS中的转换更新Y域？
如何用D3.JS中的转换更新Y域？
提问于 2015-09-24 13:22:59
我必须显示一个不断增长的线条图，每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/
如何通过过渡或类似的方式移除它？
回答 1
Stack Overflow用户
发布于 2015-09-24 16:31:58
我建议使用javascript提供的requestAnimationFrame()，而不是监听转换的"end“事件并再次调用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)");希望这就是你要找的！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32762530
复制相关文章
相似问题
腾讯云开发者
