Question

当我在脚本中读取csv文件时（我第一次尝试在D3中读取CSV）时，我遇到了一种奇怪的行为。我无法访问脚本中的数据，但我能够在控制台中看到它。我的CSV文件为两列数据，其中'time'和'pos_n'为标题。这是我的代码：

var myData = []
d3.csv("my_sample.csv", function(data) {
        myData = data.map(function(d){
            return [+d["time"], +d["pos_n"]];
        })});

    console.log("from inside the code, length of myData: ", myData.length)

以下是控制台的输出： Output from console

不确定如何让我的代码看到myData数组。任何指针都将非常感激。

谢谢！

Answer 1

d3.csv（）是一个异步函数，它读取cvs文件并通过回调返回结果。当您在调用d3.csv（）方法后立即尝试读取myData时，它会输出'0'，因为回调函数（数据）尚未执行且myData数组仍为空。您可以在控制台中看到预期的输出，因为当您手动输入命令时，回调已经被触发，新数据存储在myData数组中。由于其异步执行，这是Javascript中的典型问题。让代码看到新数据的最简单方法是将其放在回调函数中：

  var myData = []
  d3.csv("my_sample.csv", function(data) {
          myData = data.map(function(d){
              return [+d["time"], +d["pos_n"]];
          })
  // your code goes here
  });

如果您正在编写复杂的应用程序，最好使用async.js或本机Promises等库来构建应用程序。
您可以在此处阅读有关JavaScript的异步性质的更多信息：https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/README.md#you-dont-know-js-async--performance

csv数据在d3脚本中不可访问，但可在控制台中访问

1 个答案: