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数组的外观：

如何在d3.js中转换来自csv文件的数据

2 个答案: