2016-06-22 65 views
0

我想創建使用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++; 
      } 
     } 
     }); 
    }); 
+0

我會實現的WebSocket給予數據時,有一個用於數據的變化,而不是請求(輪詢),你投入了大量負載的服務器和客戶端上.. – Pogrindis

回答

0

實際上是否存在與您的return語句一致的換行符?

$('.background').trigger('newPoint'); 
return //is there actually a line break here? 
setTimeout(startGraph,10); 

如果是這樣,則不打算執行下一行。

Why doesn't a Javascript return statement work when the return value is on a new line?

+0

在你的代碼片段中,你有 'return' 和'setTimeout(startGraph,10);' 在不同的行上。 這兩個實際上在同一行嗎? –

+0

不,他們是不同的行 – hhhh4

+0

因此,'setTimeout(startGraph,10)'永遠不會被調用。 我懷疑你想要做的是: 'interval = setTimeout(startGraph,10); return;' 除非你想在30分鐘後停止工作? –