与nvd3.js的实时线图

我正在尝试使用nvd3.js创build一个实时graphics，这个graphics会定期更新，并带有数据被实时处理的印象。

现在我已经能够创build一个定期更新graphics的函数，但是我不能像在向左转换的行那样在“状态”之间进行平滑过渡。

这里是我使用nvd3.js，这里有趣的代码是：

d3.select('#chart svg') .datum(data) .transition().duration(duration) .call(chart); 

现在，我已经能够使用d3.js来生成我想要的东西，但我更愿意使用nvd3.js提供的所有工具。 这是我想用nvd3制作的

使用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(); } 

Answer 1

你可能想看看： D3实时stream图（Graph Data Visualization） ，

特别是答案的链接： http : //bost.ocks.org/mike/path/

总的来说，我看到了两种处理垂直转换问题的方法：

• 过采样在实际点之间有一些线性插值，并且点之间的间隔越小，垂直转换看起来就越“水平”（但缺点是会得到很多“错误”点，这可能是不可接受的，取决于使用图表）
• 通过在最后添加来扩展图表，并在左侧翻译图表，确保仍然可用的左侧部分不会显示，直到您删除它（裁剪或做任何其他技巧），这是最好的，上面提到的解决scheme那