Question

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

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

目前你的问题并不完全清楚。但是，在我看来，你是在问这些问题：＆＃34;如何在不知道CSV中标题名称的情况下将字符串转换为数字？＆＃34; 。

在这种情况下，您可以使用行函数中的第三个参数（传统上名为columns）来迭代所有标题，即使CSV的结构未知。

首先，让我们看一下，实际上我们将字符串作为默认原语：

＆＃13;

var csv = `foo,bar,baz
12,32,44
16,13,64
16,77,42`;

var data = d3.csvParse(csv)

console.log(data)

＆＃13;

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

＆＃13;

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

现在让我们使用通用代码转换它们。我们基本上会得到标题＆＃39;名称和使用for循环迭代每个属性：

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

以下是演示：

＆＃13;

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)

＆＃13;

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

＆＃13;

正如您所看到的，现在我们有了数字，我们在不使用任何标题名称（foo，bar和baz）的情况下执行了此操作。

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

1 个答案: