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

你可能想看看: D3实时stream图(Graph Data Visualization) ,

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

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

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