Question

我希望每秒显示来自服务器的实时数据。

我已经关注了一些实时演示，但是当我尝试移动旧数据时，它会更新整个路径并且该翻译看起来很奇怪寻找这两个链接

这里有数据http://jsfiddle.net/amitwork/j9unf09d/（这项工作很好，它保存了在30分钟浏览器崩溃后已经通过的旧数据）

当我移动旧数据http://jsfiddle.net/amitwork/q2w6sewa/2/时（在此版本中我尝试每次首先删除而不是开始难看的翻译）

行号 557

object.pushData()

首先使用左上方的切换直播按钮

随意玩代码..

30分钟后浏览器将其自行删除，因为数据在浏览器中占用太多空间，这就是为什么我必须删除已经传递的旧数据

代码

updateLines = function(islive){
        // debugger;

        barGroup.transition()
            .duration(duration)
            .ease('linear')
            .style("display",function(d){
                // console.log(d);
                if(d.visible){
                    return "block";
                }else{
                    return "none";
                }
            });

        bars
        .data(function (_d) {
                var _s = [];
                var _modelObj = {};
                _modelObj = _d;
                _modelObj.values = [];
                data.forEach(function(e){
                    var _obj = {};
                    if(_d.visible){
                        _obj.value = e[_d.attr];    
                    }else{
                        _obj.value = 0;
                    }

                    _obj.color = _d.color;
                    _obj.modelId = _d.id;
                    _obj.date = e.date;
                    _modelObj.values.push(_obj);
                });
                _s.push(_modelObj);
                return  _s;
            }); 


        bars.transition()
            .duration(duration)
            .ease('linear')
            .style("stroke", function (d) {
                return d.color;
            })
            .attr("d", function (d) {
                if(d.id == "roll" || d.id == "pitch" ){
                    return priceline2(d.values);
                }
                return priceline(d.values);
            });

    }

现在在调用此函数之后或之前如果我使用Data.shift（）; 它就像第二张图

实时更新折线图数据

0 个答案: