Javascript 立体主义不在回调上绘制更新数据

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

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

下面是我与DOM交互的代码（我不认为这部分会导致问题）：

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

下面是处理每个度量的代码（可能是导致问题的原因）：

/*保留初始度量的地图
当可视化初始化时，我们加载
模型的“属性”字段。该模型是一组单独的度量*/
var initializedMetrics={}；
函数getMetric（名称、型号）{
var format=d3.time.format（“%I-%M-%S”）；
return context.metric（函数（开始、停止、步骤、回调）{
var静态值=[]；
if（initializedMetrics[名称]）{
/*如果度量已经初始化并且我们加载了历史数据
在“属性”字段中，绘制存储在“最新数据”中的最新数据
此字段应在对服务器的每次API调用中每秒更新一次*/
while（start找到了一个解决方案。我没有在主干集合中合并新数据，而是重置它并重新添加每个数据点。这意味着我最初传递给cubism的模型与正在更新的模型不一样。通过在每次调用服务器后合并集合而不是重置来解决问题

       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));

        /* 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);
        }