Question

我有两个相同的小提琴，但数据可供文档使用的方式除外。

Fiddle 1按照我的意愿行事，我使用d3.csv方法调用数据并将数据提供给handsontable
Fiddle 2使用ajax，我将数据分配给一个全局数组，我认为其他功能可以使用，但数据不会显示在我的手中。

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

更新1： Fiddle 2 UPDATED我通过将asynch更改为false来获取数据，有人解释为什么这会解决问题？

Javascript for Fiddle 2

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']
  });

Javascript for Fiddle 1

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

问题在于，这是异步调用的，并且数据在传递给其他函数之前未完全加载。通过设置async：false，在继续执行其余的javascript之前，调用ajax以完全加载csv文件。

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

这解决了我的问题。

AJAX数据与d3.csv数据可用性

1 个答案: