我在 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。只是没有绘制时间序列路径。