Javascript 使用nvd3.js的实时线图

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

现在，我已经能够创建一个函数，它会定期更新图形，但我无法在“状态”之间实现平滑过渡，就像直线向左过渡一样

这是我使用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();

}

---

您可能想看看： ,

特别是答案的链接：

一般来说，我认为有两种方法可以解决垂直过渡问题：

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

---

我同意你所说的一切。然而，我的问题是使用nvd3而不是d3。我问题中的第一个链接显示了我目前在nvd3中的内容，第二个链接显示了我在d3.js中的完整工作版本。你的第二种方法就是我在d3解决方案中使用的方法！翻译不是件坏事吗？假设你不断增加100，那么你肯定会在某个时候遇到繁重的计算，比如把100加到1e27