带有 nvd3.js 的实时线图

Posted 2023-02-22

【中文标题】带有 nvd3.js 的实时线图

【英文标题】：Real time line graph with nvd3.js

【发布时间】：2013-02-26 03:29:57

【问题描述】：

我正在尝试使用 nvd3.js 创建一个实时图表，该图表会定期更新，并且给人的印象是数据是实时处理的。

现在我已经能够创建一个定期更新图表的函数，但我无法在“状态”之间进行平滑转换，比如向左转换的线。

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

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

现在，我已经能够使用 d3.js 生成我想要的东西，但我希望能够使用 nvd3.js 提供的所有工具。 Here 是我想使用 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();

【参考方案1】：

您可能想查看： D3 Real-Time streamgraph (Graph Data Visualization),

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

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

过采样在真实点之间有一些线性插值，点之间的间隔越小，垂直过渡看起来就越“水平”（但缺点是你会得到很多“假”点，这可能是不可接受，具体取决于图表的使用） 通过在末尾添加来扩展图表，并翻译左侧的图表，确保仍然可用的左侧部分在您删除之前不显示（剪切或执行任何其他技巧），这是最好的，也是解决方案上面提到的这样做

【讨论】：

我同意你所说的一切。但是我的问题是使用 nvd3 而不是 d3。我的问题中的第一个链接显示了我现在在 nvd3 中拥有的内容，第二个链接显示了我在 d3.js 中的完整工作版本。您的第二种方法是我用于 d3 解决方案的方法。

点赞！不是翻译的东西不好，假设你不断增加 100，在某些时候你肯定会遇到繁重的计算，比如将 100 添加到 1e27