Javascript 数据链接到变量时，d3js不打印

我正在尝试使用从外部JSON文件获得的数据进行最简单的绘图（任何类型）。我使用的是

plotly.js

，它是d3js的扩展

这是我们感兴趣的部分：

var dates = [], scores = [];
var user_json = 'https://hacker-news.firebaseio.com/v0/user/anton_tarasenko.json';
var item_json = 'https://hacker-news.firebaseio.com/v0/item/';

$.getJSON(user_json, function (user) {
    $.each(user.submitted, function(i, item_id) {
        $.getJSON(item_json + item_id + '.json', function(item) {
            if (item.type == 'story') {
                scores.push(Number(item.score));
                dates.push(Number(item.time));
            }
        });
    });
});

var data = [{
    x: dates,
    y: scores,
    mode: 'lines+markers',
    type: 'scatter'
}];
Plotly.newPlot('myDiv', data);

这将返回一个空的绘图。但是当我用

x:[1461892181460844086，…，1427738937]

替换

x:dates

，用

y:[1154，…，1]

替换

y:scores

（日期）和

log（分数）

的输出时，它工作得很好

那么为什么库会忽略对数组的引用呢？我想我误用了变量，但不知道如何误用

---

有什么想法吗

我认为这是一个异步问题。尝试将代码放入回调中：

var dates = [], scores = [];
var user_json = 'https://hacker-news.firebaseio.com/v0/user/anton_tarasenko.json';
var item_json = 'https://hacker-news.firebaseio.com/v0/item/';
var ii = 0;
$.getJSON(user_json, function (user) {
  $.each(user.submitted, function(i, item_id) {
    $.getJSON(item_json + item_id + '.json', function(item) {

         ii++;
        if (item.type == 'story') {
            scores.push(Number(item.score));
            dates.push(Number(item.time));
            //check for last iteration
            if(ii === user.submitted.length){
            var data = [{
                x: dates,
                y: scores,
                mode: 'lines+markers',
                type: 'scatter'
                 }];
                Plotly.newPlot('myDiv', data);
            }
        }


     });
  });
});

---

这不是一个非常优雅的解决方案，但它应该可以工作。

我认为这是一个异步问题。尝试将代码放入回调中：

var dates = [], scores = [];
var user_json = 'https://hacker-news.firebaseio.com/v0/user/anton_tarasenko.json';
var item_json = 'https://hacker-news.firebaseio.com/v0/item/';
var ii = 0;
$.getJSON(user_json, function (user) {
  $.each(user.submitted, function(i, item_id) {
    $.getJSON(item_json + item_id + '.json', function(item) {

         ii++;
        if (item.type == 'story') {
            scores.push(Number(item.score));
            dates.push(Number(item.time));
            //check for last iteration
            if(ii === user.submitted.length){
            var data = [{
                x: dates,
                y: scores,
                mode: 'lines+markers',
                type: 'scatter'
                 }];
                Plotly.newPlot('myDiv', data);
            }
        }


     });
  });
});

---

这不是一个非常优雅的解决方案，但它应该可以工作。

您的问题与异步编程的本质有关。由于

$.getJSON（）

是异步的，因此所有后续代码实际上都是在填充分数或日期数组之前执行的

要使代码按预期工作，您可以使用以下方法：将所有剩余代码移动到回调中（并为每个项调用plot）或使用承诺（使用所有数据调用plot一次）。使用jQuery，您可以相对轻松地处理承诺

var user_json = 'https://hacker-news.firebaseio.com/v0/user/anton_tarasenko.json';
var item_json = 'https://hacker-news.firebaseio.com/v0/item/';

// Main

getUser()
  .then(getScoresAndDates)
  .then(plot);

// Declarations
function all(arrayOfPromises) {
  return jQuery.when.apply(jQuery, arrayOfPromises).then(function() {
    return Array.prototype.slice.call(arguments, 0);
  });
}

function getUser() {
  return $.getJSON(user_json);
};

function getScoresAndDates(user) {

  var scoresAndDates = [];

  $.each(user.submitted, function(i, item_id) {
    scoresAndDates.push($.getJSON(item_json + item_id + '.json'));
  });

  return all(scoresAndDates);
}

function plot(result) {
  scoresAndDates = result
  .map(function(v){
    return v[0];
  })
  .filter(function(v) {
    return v.type == 'story';
  })

  var scores = scoresAndDates.map(function(v) {
    return v.score
  });
  var dates = scoresAndDates.map(function(v) {
    return v.time
  });

  var data = [{
    x: dates,
    y: scores,
    mode: 'lines+markers',
    type: 'scatter'
  }];

  Plotly.newPlot('myDiv', data);
}

---

您的问题与异步编程的本质有关。由于

$.getJSON（）

是异步的，因此所有后续代码实际上都是在填充分数或日期数组之前执行的

要使代码按预期工作，您可以使用以下方法：将所有剩余代码移动到回调中（并为每个项调用plot）或使用承诺（使用所有数据调用plot一次）。使用jQuery，您可以相对轻松地处理承诺

var user_json = 'https://hacker-news.firebaseio.com/v0/user/anton_tarasenko.json';
var item_json = 'https://hacker-news.firebaseio.com/v0/item/';

// Main

getUser()
  .then(getScoresAndDates)
  .then(plot);

// Declarations
function all(arrayOfPromises) {
  return jQuery.when.apply(jQuery, arrayOfPromises).then(function() {
    return Array.prototype.slice.call(arguments, 0);
  });
}

function getUser() {
  return $.getJSON(user_json);
};

function getScoresAndDates(user) {

  var scoresAndDates = [];

  $.each(user.submitted, function(i, item_id) {
    scoresAndDates.push($.getJSON(item_json + item_id + '.json'));
  });

  return all(scoresAndDates);
}

function plot(result) {
  scoresAndDates = result
  .map(function(v){
    return v[0];
  })
  .filter(function(v) {
    return v.type == 'story';
  })

  var scores = scoresAndDates.map(function(v) {
    return v.score
  });
  var dates = scoresAndDates.map(function(v) {
    return v.time
  });

  var data = [{
    x: dates,
    y: scores,
    mode: 'lines+markers',
    type: 'scatter'
  }];

  Plotly.newPlot('myDiv', data);
}

---

非常感谢：它是异步的。我将

newPlot

移动到

push

es之后，所以现在每当它获得一个新的数字时，它都会重新绘制绘图。非常感谢：它是异步的。我将

newPlot

移动到

push

es之后，所以现在每当它获得一个新数字时，它都会重新绘制绘图。