如何在实时数据的基础上平滑地动画前端表示？

Question

我们将开发一个基于实时数据的HTML5+CSS+JavaScript web应用程序。

数据被记录在一个.csv文件中，我们通过使用setInterval()触发AJAX调用来检索最新的记录。目前，该项目是在Apache服务器上实现的，不使用任何数据库。在使用CSS/SVG/JavaScript绘制基于这类数据的动画图形时，往往会因数据的更新而中断，且过渡不流畅。

例如，我们尝试使用JavaScript库SiriWave在首页绘制一条曲线，当setInterval()函数更新数据时，波形中断。有没有办法在不使用计时器刷新的情况下平滑地更新曲线？我的代码如下：

function getData(limit, callback) {
    var data = setInterval(function () {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': "../data/data.csv?t="+new Date().getTime(),
            'success': function (data) {
                json = data;
            }
        });
        var count = json.replace(/[^\n]/g, '').length;
        var i = count - 1;
        var lines = json.split("\n");
        var items = lines[i].split(",");
        callback(items);
    }, limit);
}

getData(1000, function (items){
    //Used to remove the last scene
    document.getElementById("wave").innerHTML = '';
    //Start to draw the waving curve
    var siriWave = new SiriWave({
        container: document.getElementById('wave'),
        width: 1920,
        height: 400,
        speed: items[1],
        frequency: items[2],
        autostart: true
    });
});

示例数据如下( csv格式)：

2016-07-20, 100, 20
2016-07-21, 120, 40
2016-07-22, 140, 60

问题是曲线突然从当前状态变为下一个更新的状态。有谁对如何解决动画问题有想法吗？后端和前端解决方案都是受欢迎的。非常感谢。

Answer 1

您可以用套接字替换计时器。有很多方法可以做到这一点，这取决于您的服务器端技术。我特别推荐使用NodeJS，它很好地处理了许多像这样的实时问题。