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

我有一个包含以下数据的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
                     .....
                     .....
             });

---

但是我实际上如何转换它呢？

下面的代码将原始数据存储在一个名为

new\u data

的数组中。它包含具有键

“字母表”

、

“值”

和

“插曲”

的对象

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

数组的外观：

---

您的问题有点误导，因为您似乎希望生成具有所需结构的新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、插曲
3,1,5,0,2,6,0,1
2,4,3,5,7,9,6,2`;
变量数据=d3.csvParse（csv，函数（d）{
for（变量键在d中）{
d[键]=+d[键]；
}
返回d；
});
var transposedData=[]；
data.forEach（函数（d）{
for（变量键在d中）{
var obj={}；
如果（关键！=“插曲”）{
字母表=键；
obj.value=d[键]；
客观事件=d.事件；
transposedData.push（obj）
} 
}
});
console.log（transposedData）

---

数据
是一个对象数组，而不是一个对象。此外，我想应该动态确定事件值，而不是硬编码。数据是一个对象<代码>控制台.log（数据类型）

->

对象

console.log（数据）

->

对象{A:“3”，B:“1”，C:“5”，D:“0”，E:“2”，F:“6”，G:“0”，插曲：“1”}

只有在使用D3 v5时，

D3.csv

的第二个参数可以是行转换函数，这才是正确的。但是，由于OP使用

函数（error，Data）

指定两个参数，这表示使用v4或更低版本，其中传递给回调的参数是一个对象数组。另外，在OP的代码中有一个<代码>数据。（代码）>嗯，好点，我没有考虑版本之间的差异！我确实在使用v5。