导入 csv，使用 D3.js 和 Javascript 制作折线图

Question

这就是我导入数据以创建折线图的方式。 它工作正常，但我希望它更普遍地工作。 有没有办法替换 d.v1 = +d.Time 等行，这样它们就不必使用列的确切名称（时间、温度 2、温度 3）？

d3.csv("data.csv", function(error, data){
data.forEach(function(d){
d.v1 = +d.Time;
d.v2 = +d.Temp2;
d.v3 = +d.Temp3;
});

我有这段代码，我可以在其中读取列的名称来自动标记轴。

d3.csv('Messdaten.csv', function(data){  
var headerNames = d3.keys(data[0])      
     xAxisName = headerNames[0];      
     yAxisName1 = headerNames[1];
     yAxisName2 = headerNames[2];
     yAxisName3 = headerNames[3];
});

但我无法使用它来代替列的确切名称来创建图表。

Answer 1

现在你的问题还不是很清楚。但是，在我看来，您似乎在问以下问题：“如何在不知道 CSV 中标题名称的情况下将字符串转换为数字？”。

既然如此，您可以使用行函数中的第三个参数（传统上命名为 columns）来遍历所有标题，即使 CSV 的结构未知。

首先，让我们证明事实上我们有字符串作为默认原语：

var csv = `foo,bar,baz
12,32,44
16,13,64
16,77,42`;

var data = d3.csvParse(csv)

console.log(data)

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

如您所见，foo、bar 和 baz 的所有值都是字符串，而不是数字。

现在让我们使用通用代码转换它们。我们基本上会获取标题的名称，并使用 for 循环遍历每个属性：

function(d, i, columns) {
    for (var i = 0; i < columns.length; i++) {
        d[columns[i]] = +d[columns[i]];
    }
    return d;
}

这里是演示：

var csv = `foo,bar,baz
12,32,44
16,13,64
16,77,42`;

var data = d3.csvParse(csv, function(d, i, columns) {
  for (var i = 0; i < columns.length; i++) {
    d[columns[i]] = +d[columns[i]];
  }
  return d;
})

console.log(data)

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

如您所见，现在我们有了数字，而且我们没有使用任何标题名称（foo、bar 和 baz）。