使用 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屋！