javascript - 像 CSV 一样读取数组数组

Question

如果我有一个如下所示的 CSV 文件:

Year,Value1,Value2,Value3
2000,500,20,30
2001,40,30,20
2002,90,12,80
2003,70,55,22
...

我可以使用 d3.csv("./file.csv").then(function (data)) 方法通过 D3 JS 读取此内容，我将获得如下所示的数据这个:

[
    { Value1: "500", Value2: "20", Value3: "30", Year: "2000"},
    { Value1: "40", Value2: "30", Value3: "20", Year: "2001"},
    { Value1: "90", Value2: "12", Value3: "80", Year: "2002"},
    { Value1: "70", Value2: "55", Value3: "22", Year: "2003"}
]

这太棒了。它完美地按照我的需要格式化数据。对我来说不幸的是，我将使用的传入数据实际上是一个数组数组，如下所示:

[
    ["Year","Value1","Value2","Value3"],
    [2000,500,20,30],
    [2001,40,30,20],
    [2002,90,12,80],
    [2003,70,55,22]
]

D3 中是否有内置方法可以对这个数组数组执行 d3.csv() 方法对 CSV 执行的操作？例如，是否有一种方法可以接受数组数组并将其转换为对象数组，其中每个列标题都与其在给定行中的值相关联？

到目前为止，我想出的最佳解决方案是将数组数组转换为 CSV，然后用 D3 解析它，如下所示(我在每个值周围加上双引号，以防值中出现逗号):

let csv = "";
for (const array of arrays) {
    csv += '"' + array.join('","') + '"\r\n';
}
const data = d3.csvParse(csv);

这对我来说有点笨拙，所以我想知道是否有更快的方法来做到这一点。

Answer 1

您可以使用纯 JS 来完成此操作，将每一行映射到可以使用 reduce 构建的对象。

var data = [
  ["Year", "Value1", "Value2", "Value3"],
  [2000, 500, 20, 30],
  [2001, 40, 30, 20],
  [2002, 90, 12, 80],
  [2003, 70, 55, 22]
];

var result = data.slice(1)
  .map(row => row.reduce((acc, curr, i) => {
    acc[data[0][i]] = curr;
    return acc;
  }, {}));

console.log(result);