我想創建使用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