javascript - Cubism 未在回调上绘制更新数据

Question

所以我的目标是绘制一些存储在 Backbone 集合中的实时指标。我有一个存储指标的主干集合，当我轮询后端服务器时它每秒都会更新。我的集合有一系列历史指标和一个“最新数据”字段，它是来自后端的最新数据。每一秒，“最新数据”都会更新为不同的值。我将主干集合的引用传递给创建立体度量的函数。

当渲染包含 Cubism.js View 的 View 时，它应该将集合中存储的所有数据点历史加载到地平线图表中。这是我已经取得成功的部分。但是，当度量函数执行回调时，它不会从每秒更新的“最新数据”字段中绘制新的/正确的点。

这是我与 DOM 交互的代码(我不相信这部分会导致问题):

       var context = cubism.context()
            .serverDelay(0)
            .clientDelay(0)
            .step(250)
            .size(1116);


       //Getting the metrics from the backbone collection   
       var models = this.dataSet.models;
       console.log('models in metric view',models);
        //aggregate 'metrics'. Each component has a 'metric' which contains its stats over time
        for(model in models){
            var attributes = models[model].attributes;

            if(!attributes['name'] || attributes['type']== "FLOW" || attributes['type'] == "SERVER"){
                continue;
            }
            if(attributes['name'] == null){
                continue;
            }
            var name = attributes['name'];
            var type = attributes['type'];
            var serverName = attributes['serverName'];
            var metName = name.concat(serverName);
            console.log(metName);

            //Getting the cubism metric for each stat in the backbone collection
            //Passing in a reference to the current model in the backbone collection (this.dataSet.models[model])
            var curContext = getMetric(metName, this.dataSet.models[model]);

            statsList.push(curContext);

        }

        d3.select(this.loc).selectAll(".axis")
            .data(["top", "bottom"])
          .enter().append("div")
            .attr("class", function(d) { return d + " axis"; })
            .each(function(d) { d3.select(this).call(context.axis().ticks(12).orient(d)); });

        //create rule
        d3.select(this.loc).append("div")
            .style("position", "fixed")
            .style("top", 0)
            .style("bottom", 0)
            .style("width", "1px")
            .style("pointer-events", "none")
            .call(context.rule());

        d3.select(this.loc).selectAll(".horizon")
            .data(statsList)
          .enter().insert("div", ".bottom")
            .attr("class", "horizon")
            .call(context.horizon().height(35));

它本质上是迭代主干集合中的所有统计信息，然后调用“getMetric”传入对主干集合中当前统计信息的引用。 'getMetric' 返回立体度量。

这是处理每个指标的代码(可能导致问题):

        /* Keep a map of intialized metrics 
        When the visualization is initialized, we load the historical data which is in the
        'attributes' field of the model. The model is an individual set metrics */

        var initializedMetrics = {};
        function getMetric(name, model){
            var format = d3.time.format("%I-%M-%S");
            return context.metric(function(start, stop, step, callback){
                var statValues = [];

                if(initializedMetrics[name]){
                    /* If the metric has already been initialized and we loaded the historical data
                    from 'attributes' field, plot the newest data which is stored in 'most-recent-data'
                    This field should be updated every second on every API call to the server */
                    while(start<stop){
                        start+=step;
                        console.log(model.attributes['most-recent-data']['rate']);
                        statValues.push(model.attributes['most-recent-data']['rate']);
                    }

                } else{
                    /* Metric has not been initalized, so we load all the historical data in 'all-data'
                    for this stat and plot it over time*/
                    initializedMetrics[name]=true;

                    var lookup = {},
                    i = start.getTime();
                    //console.log('startTime', i);
                    var curStat = null;
                    var metricData = model.attributes['all-data']
                    for(stat in metricData){
                        curStat = metricData[stat];
                        //console.log(name, curStat);
                        var curDate = new Date(curStat['timeStamp']);
                        curDate = format(curDate);
                        lookup[curDate] = curStat;
                    }
                    var lastValue;
                    while((i+=step) < stop){
                        start+=step;
                        var key = format(new Date(i));
                        if(key in lookup){
                            lastValue = lookup[key]['valueLong'];
                        }
                        var curVal = key in lookup ? lookup[key]['valueLong'] : lastValue;
                        //console.log(name,curVal);
                        statValues.push(curVal);
                    }
                }
                 /* Callback with statValues*/
                 callback(null,statValues);
                }, name);
        }

我成功加载了所有历史数据(else 括号内的所有内容)。但是，当初始化指标时，我尝试加载存储“最新数据”的新数据。该字段每秒通过 API 调用更新一次，但每次回调时，它仅绘制存储在“最新数据”中的初始数据。我可以确认最近的数据确实在主干集合本身中更新，但传递给 cubism 的引用并未在每次回调时更新。当我在 cubism 代码中记录“最新数据”时，它永远不会更新到最新值。

这是一个关闭问题吗？我是否缺少一些用于轮询新数据的立体语法？或者我是否需要以不同的方式传递主干集合引用？任何提示都会非常有帮助。谢谢。

Answer 1

找到了解决方案。我没有在主干集合中合并新数据，而是重置它并再次添加每个数据点。这意味着我最初传递给 cubism 的模型与正在更新的模型不同。通过在每次调用服务器后合并集合而不是重置来解决问题。