Question

我正在尝试从csv文件中读取数据，并且希望将每个列的数据存储在数组中，如下面的代码所示。我得到的但我不知道如何解决的问题是所有值都在方括号内定义，但是一旦我尝试处理其他位置的数组，则数据是不确定的。关于出什么问题有什么想法吗？我的D3版本是v3。

<script>

var computerid = [];
var timestamp = [];
var percentage = [];

d3.csv("cpu-util.csv", function(data) {
    for (var i = 0; i < data.length; i++) {
        timestamp[i] = data[i].timestamp;
        computerid[i] = data[i].Computer_ID; 
        percentage[i] = data[i].Percentage;
        console.log(computerid[i]); //prints value
        console.log(timestamp[i]);
        console.log(percentage[i]);

    }
});

console.log(computerid[1]); //here, it prints undefined although inside the loop it prints values

csv文件的一部分：

计算机ID，时间戳，值，百分比

1，01-07-11 0:00，0.8，8

Answer 1

您的CSV数据必须采用正确的格式。有一些不必要的空格使解析起来很困难，因为它在标头名称中包含空格，从而将属性名称保留在对象中。

cpu-util.csv 应该是

Computer_ID,timestamp,value,Percentage
1,01-07-11 0:00,0.8,8

此外，d3.js解析数据并保留标题标签。因此，computerid数组应使用数据的Computer_ID属性填充。因此，您的代码应类似于：

<script>
   var timestamp = [],
       computerid = [],
       percentage = [];

 d3.csv("cpu-util.csv", function(data) {
   console.log(data); //see the data structure
    for (var i = 0; i < data.length; i++) {
        timestamp[i] = data[i].timestamp; //use the property names.
        computerid[i] = data[i].Computer_ID; 
        percentage[i] = data[i].Percentage;
        console.log(computerid[i]);
        console.log(timestamp[i]);
        console.log(percentage[i]);
    }
     console.log(computerid[0]); //this will appear as it is within the function and 
                                 //the array is filled by the time this line is run
  });

  console.log(computerid[0]); //this will be undefined due to the asynchronous nature of javascript. 
                              //This line of code runs before the for loop within the function
</script>

如果您看到控制台日志，则由于JavaScript的异步特性，console.log(computerid[0])将首先出现在日志中，而之后是函数中的其他三个。您可以通过多种方式链接功能，以使用Async / Await或Promises使它们同步。

d3.js还将所有信息解析为字符串。因此，需要使用函数将数字值{Percentage转换为数字数据类型。请记住这一点。

从CSV载入D3中特定列的未定义数据

1 个答案: