Question

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

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

这是我与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'传递对主干集合中当前stat的引用。 '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);
        }

我正在成功加载所有历史数据（其他内容包含在其他内容中）。但是，当度量标准初始化时，我尝试加载存储在“最新数据”中的新数据。该字段每秒都会通过API调用进行更新，但每次回调时，它只能绘制存储在“最新数据”中的初始数据。我可以确认最近的数据确实在骨干集合本身中进行了更新，但是传递给立体主义的引用并没有在每次回调时更新。当我在立体主义代码中记录“最新数据”时，它永远不会更新到最新值。

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

Answer 1

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

立体主义没有在回调上绘制更新的数据

1 个答案: