javascript 使用 nvd3.js 的实时折线图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15330390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Real time line graph with nvd3.js
提问by Christopher Chiche
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.
我正在尝试使用 nvd3.js 创建一个实时图表，该图表会定期更新，并且给人的印象是数据是实时处理的。
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.
现在我已经能够创建一个函数来定期更新图表，但我无法像向左过渡的线那样在“状态”之间进行平滑过渡。
Hereis what I did using nvd3.js , here the interesting code is:
这是我使用 nvd3.js 所做的，这里有趣的代码是：
d3.select('#chart svg')
.datum(data)
.transition().duration(duration)
.call(chart);
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. Hereis what I would like to produce using nvd3
现在，我已经能够使用 d3.js 生成我想要的东西，但我更希望能够使用 nvd3.js 提供的所有工具。这是我想使用 nvd3 生成的内容
The interesting code for the transition using d3.js is:
使用 d3.js 进行转换的有趣代码是：
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();
}
回答by Alexandre Kaspar
You probably want to look at: D3 Real-Time streamgraph (Graph Data Visualization),
你可能想看看： D3 Real-Time streamgraph (Graph Data Visualization)，
especially the link of the answer: http://bost.ocks.org/mike/path/
特别是答案的链接：http: //bost.ocks.org/mike/path/
In general, I see two ways to deal with the vertical transition problem:
一般来说，我看到两种处理垂直过渡问题的方法：
- oversampling having some linear interpolation between the real point, and the smaller the interval between points, the more "horizontal" the vertical transition will look (but the drawback is that you get a lot of "false" points, that may be inacceptable depending on the use of the chart)
- extend the chart by adding at the end, and translate the chart on the left, making sure the still available left part is not shown until you remove it (clipping it or doing any other trick), that's best, and the solution mentioned above does that
- 过采样在真实点之间有一些线性插值，点之间的间隔越小，垂直过渡看起来就越“水平”（但缺点是你会得到很多“假”点，这可能是不可接受的，具体取决于图表的使用）
- 通过在末尾添加来扩展图表，并翻译左侧的图表，确保在您删除它之前不会显示仍然可用的左侧部分（剪切它或执行任何其他技巧），这是最好的，并且上面提到的解决方案确实如此那
