尝试使用 Cubism 和 D3 编写简单的可视化。诚然,我对使用 Cubism 和 D3 还很陌生,而且 Cubism 文档很难理解。
轮询 URL 以获取数值以检索“速率”,然后将值推送到示例中的数组中。画布的东西不会呈现,最初,Cubism.js 示例中的数值也不会呈现。过了一会儿,一个数字出现,反映了最新的轮询值。调试 JavaScript 确实会显示随着时间的推移随着值扩展的数组。
任何有助于更好地理解问题的帮助将不胜感激。
render: function() {
var thatElement = this.el;
function update(model) {
var values = [];
return context.metric(function(start, stop, step, callback) {
model.fetch();
var data = model.toJSON();
if (data[0]) values.push(parseInt(data[0]));
callback(null, values = values.slice(-context.size()));
}, "Rate");
}
var context = cubism.context()
.serverDelay(0)
.clientDelay(0)
.step(5000);
var foo = update(this.model);
d3.select(thatElement).append("div").call(function(div) {
div.append("div")
.attr("class", "axis")
.call(content.axis().orient("top"));
div.selectAll(".horizon")
.data([foo])
.enter().append("div")
.attr("class", "horizon")
.call(context.horizon());
div.append("div")
.attr("class", "rule")
.call(context.rule());
});
}
此外,注意到如果我在其他视图中调用 cubism.context() 东西,它会破坏前面的视图。