问题描述
我正在尝试使用 nvd3.js 创建一个实时图表,该图表会定期更新,并且给人的印象是数据是实时处理的.
I am trying to create a real time graph using nvd3.js which would be updated periodically and with the impression that the data is processed in real time.
现在我已经能够创建一个函数来定期更新图表,但我无法像向左过渡的线那样在状态"之间进行平滑过渡.
For now I have been able to create a function which would update the graph periodically but I cannot manage to have a smooth transition between "states" like the line doing a transition to the left.
这里是我使用 nvd3.js 所做的,这里有趣的代码是:
Here is what I did using nvd3.js , here the interesting code is:
d3.select('#chart svg')
.datum(data)
.transition().duration(duration)
.call(chart);
现在,我已经能够使用 d3.js 生成我想要的东西,但我更希望能够使用 nvd3.js 提供的所有工具.这里是我想使用 nvd3 制作的内容
Now, I have been able to produce what I want using d3.js but I would prefer to be able to use all the tools provided by nvd3.js. Here is what I would like to produce using nvd3
使用 d3.js 进行转换的有趣代码是:
The interesting code for the transition using d3.js is:
function tick() {
// update the domains
now = new Date();
x.domain([now - (n - 2) * duration, now - duration]);
y.domain([0, d3.max(data)]);
// push the accumulated count onto the back, and reset the count
data.push(Math.random()*10);
count = 0;
// redraw the line
svg.select(".line")
.attr("d", line)
.attr("transform", null);
// slide the x-axis left
axis.transition()
.duration(duration)
.ease("linear")
.call(x.axis);
// slide the line left
path.transition()
.duration(duration)
.ease("linear")
.attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
.each("end", tick);
// pop the old data point off the front
data.shift();
}
推荐答案
你可能想看看:D3 实时流图(图形数据可视化)、
特别是答案的链接:http://bost.ocks.org/mike/path/
总的来说,我看到了两种处理垂直过渡问题的方法:
In general, I see two ways to deal with the vertical transition problem:
- 过采样在真实点之间有一些线性插值,点之间的间隔越小,垂直过渡看起来就越水平"(但缺点是你会得到很多假"点,这可能是不可接受,具体取决于图表的用途)
- 通过在末尾添加来扩展图表,并翻译左侧的图表,确保在您将其删除(剪切或执行任何其他技巧)之前不会显示仍然可用的左侧部分,这是最好的,以及解决方案上面提到的是
这篇关于使用 nvd3.js 的实时折线图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!