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() を呼び出すと、前のビューが壊れることに気付きました。