Question

我正在尝试根据从api获得的值创建堆栈区域图。我的第一个api给了我一系列日期。例如：6月1日 - 6月7日。我的第二个api给了我对图表的价值需求。数据看起来像这样

我的想法是调用api并将计数值推送到每次函数的函数。但不知怎的，我无法做到这一点，所以我每隔100毫秒调用一次api并抓取所有数据并触发图形。现在，当我想在一次迭代完成后调用第二个api时，调用会中断图形。请帮我解决这个问题。

 d3.json('/service/dates', function(error, dates) {
    var dran = dates;
    if (dates != null) {
      sDt = new Date(dates.st);
      eDt = new Date(dates.et);
      var i = 0;
      var start = function() {
        if (sDt > eDt) {
          clearInterval(interval);
          $('.wrapper').trigger('newPoint');
          return;
        }
        var sDate = sDt.toISOString();
        var eDate = new Date(sDt.setMinutes(sDt.getMinutes() + 30)).toISOString();

        //Calling the api for graph values
        d3.json("/service/dat?s=" + sDate + "&e=" + eDate, function(error, results) {
          if (results != null) {

            numbers = numbers.push(results.numbers);
            values = values.push(results.values);
          }
        });
        i++;
      }
      var interval = setInterval(start, 100);
    }
  });
}

Answer 1

将整个API调用放在命名函数中。然后从start()函数调用它来重新启动所有内容。

function doAPILoop() {
  d3.json('/service/dates', function(error, dates) {
    var dran = dates;
    if (dates != null) {
      sDt = new Date(dates.st);
      eDt = new Date(dates.et);
      var i = 0;
      var start = function() {
        if (sDt > eDt) {
          clearInterval(interval);
          $('.wrapper').trigger('newPoint');
          doAPILoop();
          return;
        }
        var sDate = sDt.toISOString();
        var eDate = new Date(sDt.setMinutes(sDt.getMinutes() + 30)).toISOString();

        //Calling the api for graph values
        d3.json("/service/dat?s=" + sDate + "&e=" + eDate, function(error, results) {
          if (results != null) {

            numbers = numbers.concat(results.numbers);
            values[values.length] = results.values;
          }
        });
        i++;
      }
      var interval = setInterval(start, 10);
    }
  });
}

doAPILoop();

清除间隔后如何再次调用api

1 个答案: