Cubism.js获得正确的指标,但没有绘制水平图

时间:2013-08-22 20:03:42

标签: javascript d3.js data-visualization cubism.js

我正在cubism.js上绘制约15个命名指标。我看到统计值作为指标返回。此外,如果我滚动可视化,标尺会向我显示正确的值。但是,它只是没有绘制图形。当我检查地平线div时,这就是我所看到的:

<span class="value" style=""></span>

如您所见,范围是空的。看起来应该是这样的:

<span class="value" style="">"10"</span>

以下是我用来创建指标的代码

        var context = cubism.context()
            .serverDelay(0)
            .clientDelay(0)
            .step(1*5*60)
            .size(1440);

                 //aggregate 'metrics'. Each component has a 'metric' which contains its stats over time
        for(model in models){
            var attributes = models[model].attributes;
            var name = attributes['name'];
            var curContext = getMetric(name, attributes);
            statsList.push(curContext);
        }

        function getMetric(name, attributes){
            return context.metric(function(start, stop, step, callback){
                    var statValues = [];
                    //convert start and stop to milliseconds
                    start = +start;
                    stop = +stop;
                    //depending on component type, push the correct attribute
                    var type = attributes['type'];
                    var stat = attributes['stat'];

                    //cubism expects metrics over time stored in 'slots'. these slots are indexed
                    //using 'start' and 'stop'
                    //if the metric already exists, we store the stats in each of the slots
                    if(initializedMetrics[name]){
                        while(start < stop){
                            start+= step;
                            statValues.push(stat); 
                        }
                    } else{
                        //if the metric is not initialized, we fill the preceeding slots with NaN 
                        initializedMetrics[name] = true;
                        while (start < (stop - step)) {
                          start += step;
                          statValues.push(NaN);
                        }
                        statValues.push(stat);
                    }
                    if(stat < min){
                        min = stat;
                    }
                    if(stat > max){
                        max = stat;
                    }
                    //console.log("pushing stat", name, stat)
                    callback(null, statValues);
                }, name);
        }
             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)); });

        d3.select(this.loc).append("div")
            .attr("class", "rule")
            .call(context.rule());

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

        var size = this.getSize();
        context.on("focus", function(i) {
          d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
        });

    },
    getSize: function () {
        return $(this.loc).width();
    },

要将此短语称为单个问题,地平线div设置中的“值”是什么步骤? 为了澄清,我看到创建的命名地平线div。只是没有绘制时间序列路径。

0 个答案:

没有答案