d3.jsを使用してフローティングスタック領域チャートを作成しようとしています。私は、特定の範囲で動作するグラフを持っています。私は10msごとにサービスを開始し、すべてのデータを取得してからグラフを開始するイベントをトリガーします。しかし、私のグラフの作品は、私は間隔をリセットしようとしている後30分だけ動作します。私はそれをしようとしているときに、グラフの中にジャークがあり、何とかそれが壊れます。私はそれを正しい方法でやっているかどうかはわかりません。見るべきコードはここにあります。リセット間隔でグラフの連続フローが途切れます
var numbers = [];
var values = [];
var flag = false;
var fd;
var td;
//Calling the dates service
d3.json('/api/dates', function(error,data) {
var dates = data;
if(data != null){
fd = new Date(data.start);
td = new Date(data.end);
var cnt = 0;
var startGraph = function(){
if (fd > td) {
console.log(" start Date is greater than end Date");
clearInterval(interval);
flag = true;
$('.wrapper').trigger('newPoint');
return;
}
var fdt = fd.toISOString();
var tdt = new Date(fd.setMinutes(fd.getMinutes() + 30)).toISOString();
//Calling service to get the values for stacked area chart
d3.json("/api/service?start=" +fdt+ "&end=" +tdt, function(error,result) {
if(result != null){
numbers = numbers.concat(flightInfo.numbers);
values[values.length] = flightInfo.values;
}
});
cnt++;
}
function pushPoint(){
var cnt=0;
var interval = setInterval(function(){
if(cnt!=values.length)
{
tick(values[cnt]);
cnt++;}
else
clearInterval(interval);
},400);
}
//Calling the Processing Dates API to pull the data for area chart
var interval = setInterval(startGraph,10);
}
});
$(document).ready(function() {
stackGraph(); // this is another js file
var cnt=0;
//Pushing new point
$('.wrapper').on('newPoint', function(){
if(flag){
if(cnt!=values.length){
tick(values[cnt]);
cnt++;
}
}
});
});
私は変更はなく、データのために(ポーリング)を要求があった場合、あなたは、サーバーとクライアントの両方に負荷をたくさん入れているデータを与えられるのWebSocketを実装します。.. – Pogrindis