使用nvd3.js的实时线图 [英] Real time line graph with nvd3.js

问题描述

我正在尝试使用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的实时线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！