2016-06-22 4 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

実際に改行文がある行に改行がありますか?

$('.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分後に物事を止めさせるのでなければ? –

関連する問題