したがって、私の目標は、バックボーン コレクションに格納されているいくつかのリアルタイム メトリックをプロットすることです。メトリックを格納するバックボーン コレクションがあり、バックエンド サーバーをポーリングすると毎秒更新されます。私のコレクションには、一連の履歴メトリックと、バックエンドからの最新データである「most-recent-data」フィールドがあります。毎秒、'most-recent-data' は異なる値に更新されます。キュービズム メトリクスを作成する関数にバックボーン コレクションの参照を渡します。
Cubism.js ビューを含むビューがレンダリングされると、コレクションに保存されているすべてのデータ ポイントのヒストリカル ロードを水平線グラフに実行する必要があります。これは私が成功した部分です。ただし、メトリクス関数がコールバックを実行すると、毎秒更新される「最新データ」フィールドから新しい/正しいポイントがプロットされません。
これがDOMと対話する私のコードです（この部分が問題を引き起こしているとは思いません）：
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));
基本的には、バックボーン コレクション内のすべての統計情報を反復処理してから、バックボーン コレクション内の現在の統計情報への参照を渡す 'getMetric' を呼び出します。「getMetric」はキュービズム メトリックを返します。
各メトリックを処理するコードは次のとおりです (おそらく問題を引き起こしています)。
/* 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);
}
すべての履歴データ (else ブラケット内のすべて) の読み込みに成功しています。ただし、メトリックが初期化されると、「最新データ」に保存されている新しいデータをロードしようとします。このフィールドは API 呼び出しで毎秒更新されますが、コールバックごとに、「最新データ」に格納された初期データのみがプロットされます。バックボーン コレクション自体で最新のデータが実際に更新されていることを確認できますが、cubism に渡される参照は各コールバックで更新されていません。cubism コードで「most-recent-data」をログに記録すると、最新の値に更新されません。
これは閉鎖の問題ですか？新しいデータをポーリングするためのキュービズム構文が不足していますか? または、バックボーン コレクションの参照を別の方法で渡す必要がありますか? どんなヒントも非常に役に立ちます。ありがとうございました。