如何在 d3.js 中转置 csv 文件中的数据

Question

我有一个 csv 文件，其中包含如下所述的数据：

+---+---+---+---+---+---+---+---------+
| A | B | C | D | E | F | G | Episode |
+---+---+---+---+---+---+---+---------+
| 3 | 1 | 5 | 0 | 2 | 6 | 0 | 1       |
+---+---+---+---+---+---+---+---------+

现在我想使用 d3.js 对其进行转置，这样我的最终输出将如下所示：

+----------+-------+---------+
| alphabet | value | Episode |
+----------+-------+---------+
| A        | 3     | 1       |
+----------+-------+---------+
| B        | 1     | 1       |
+----------+-------+---------+
| C        | 5     | 1       |
+----------+-------+---------+
| D        | 0     | 1       |
+----------+-------+---------+
| E        | 2     | 1       |
+----------+-------+---------+
| F        | 6     | 1       |
+----------+-------+---------+
| G        | 0     | 1       |
+----------+-------+---------+

我该怎么做？

到目前为止，我确实加载了 csv：

d3.csv("data.csv", function(error, Data){
                if(error){
                    throw error;
                }

                Data.forEach(function (d){
                     d.A = +d.A
                     .....
                     .....
             });

但是我该如何转置呢？

Answer 1

您的问题有点误导，因为您似乎想生成具有所需结构的新 CSV。

其实你想要的是有一个这样结构的数据数组：

[{
    alphabet: "A",
    value: 3,
    Episode: 1
}, {
    alphabet: "B",
    value: 1,
    Episode: 1
}, 
//etc...
];

当您了解d3.csv 如何解析 CSV 文件时，您可以使用此结构创建一个新的数据数组：第一行将是标题，而后面的所有行都是值。

所以，有几种方法可以创建一个新的数据数组，这是其中之一：

var transposedData = [];

data.forEach(function(d) {
  for (var key in d) {
    var obj = {};
    if (key !== "Episode") {
      obj.alphabet = key;
      obj.value = d[key];
      obj.Episode = d.Episode;
      transposedData.push(obj)
    } 
  }
});

这是一个演示（为了完整起见，我添加了另一行第二集）：

var csv = `A,B,C,D,E,F,G,Episode
3,1,5,0,2,6,0,1
2,4,3,5,7,9,6,2`;

var data = d3.csvParse(csv, function(d) {
  for (var key in d) {
    d[key] = +d[key];
  }
  return d;
});

var transposedData = [];

data.forEach(function(d) {
  for (var key in d) {
    var obj = {};
    if (key !== "Episode") {
      obj.alphabet = key;
      obj.value = d[key];
      obj.Episode = d.Episode;
      transposedData.push(obj)
    } 
  }
});

console.log(transposedData)

<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 2

下面的代码将原始数据存储在一个名为new_data 的数组中。它包含带有 'alphabet'、'value' 和 'Episode' 键的对象。

d3.csv("data.csv", function(data){
  new_data = []
  for (var property in data) {
    if (property != 'Episode') {
      new_data.push({'alphabet': property, 'value':parseInt(data[property]), 'Episode': 1})
    }
  } 
  console.log(new_data)
}) 

new_data 数组如下所示：