AJAX数据与D3.CSV数据可用性

Question

我有两个小提琴，除了可以向文档提供数据的方式外。

• 小提琴1可以使用我想要的方式，我使用d3.csv方法调用数据，并将数据可用于我的可提琴
• 小提琴2使用AJAX，我将数据分配给我认为可以用于其他功能的全局数组，但是数据并未显示在我的可提琴中。

我假设我引用数据的方式是不正确的，但是我真的不知道为什么我的可提座能够实现9行数据，因此传递了非零数组，但没有显示数据？我是JavaScript的新手。

更新1：Fiddle 2更新了我通过将Asynch更改为错误的人来解释为什么解决问题来掌握的数据？

小提琴2

的javascript

var csvLink = 'https://storage.googleapis.com/directionalsurvey/testDScsv.csv';
var csvdata = [];
//var trueTVD = X6J374YZ;
var trueTVD = 700;
$( document ).ready(function() {
$.ajax({
   url:csvLink,
   dataType:"text",
   success:function(data)
   {
    var split_data = data.split(/r?n|r/);
    //console.log(split_data);
    for(var i = 0; i < split_data.length-1; i++){
        var cell_data = split_data[i].split(",");
        var inner = [];
        inner.push(cell_data[0]);
        inner.push(cell_data[1]);
        inner.push(cell_data[2]);
        csvdata.push(inner);
    }
   }
  });
    console.log( "ready!" );
    console.log(csvdata);
});
  var container1 = document.getElementById('Table'),
    hot1;
  var hot1 = new Handsontable(container1, {
    data: csvdata,
    colHeaders: ['Measured Depth', "Inclination", "Azimuth"],
    rowHeaders: true,
    minSpareRows: 0,
    contextMenu: ['row_above', 'row_below', 'remove_row']
  });

小提琴1

的javascript

var csvLink = 'https://storage.googleapis.com/directionalsurvey/testDScsv.csv';
var data = [];
//var trueTVD = X6J374YZ;
var trueTVD = 700;
d3.csv(csvLink, function(dat) {
  for (i = 0; i < dat.length; i++) {
    var inner = [];
    inner.push(dat[i]['Measured Depth']);
    inner.push(dat[i]['Inclination']);
    inner.push(dat[i]['Azimuth']);
    data.push(inner);
  }
  var container1 = document.getElementById('Table'),
    hot1;
  var hot1 = new Handsontable(container1, {
    data: data,
    colHeaders: ['Measured Depth', "Inclination", "Azimuth"],
    rowHeaders: true,
    minSpareRows: 0,
    contextMenu: ['row_above', 'row_below', 'remove_row']
  });

Answer 1

问题在于它被称为异步，并且在传递到其他功能之前，数据未完全加载。通过设置异步：false ajax调用以完全加载CSV文件，然后再继续执行JavaScript的其余部分。

$( document ).ready(function() {
$.ajax({
   url:csvLink,
   dataType:"text",
   async: false,
   success:function(data)
   {

这解决了我的问题。