从 CSV 文件加载数据

有几种方法可以获取要绑定到 DOM 元素的数据。更简单的是将脚本中的数据作为数组…

var data = [ ... ];

但是 D3.js 允许我们从外部文件加载数据。在此示例中，我们将了解如何正确加载和处理 CSV 文件中的数据。

CSV 文件是逗号分隔的值。在这种文件中，每一行都是一个数据记录，每个记录由一个或多个字段组成，用逗号分隔。重要的是要知道我们将要使用的函数 d3.csv 使用 CSV 的第一行作为标题，即包含字段名称的行。

因此，请考虑此 CSV，名为“data.csv”：

city,population,area
New York,3400,210
Melbourne,1200,350
Tokyo,5200,125
Paris,800,70

要加载“data.csv”，我们使用函数 d3.csv。为简化起见，假设“data.csv”与我们脚本的目录相同，其相对路径只是“data.csv”。所以，我们写道：

d3.csv("data.csv", function(data){
    //code dealing with data here
});

请注意，在回调中，我们使用 data 作为参数。这是 D3 中的常见做法，但你可以使用任何其他名称。

d3.csv 对我们的 CSV 有什么作用？它在对象数组中转换 CSV。例如，如果我们提供数据：

d3.csv("data.csv", function(data){
    console.log(data)
});

这就是我们将要看到的：

[
    {
        "city": "New York",
        "population": "3400",
        "area": "210"
    },{
        "city": "Melbourne",
        "population": "1200",
        "area": "350"
    },{
        "city": "Tokyo",
        "population": "5200",
        "area": "125"
    },{
        "city": "Paris",
        "population": "800",
        "area": "70"
    }
]

现在我们可以将这些数据绑定到 DOM 元素。

请注意，在此示例中，population 和 area 是字符串。但是，可能，你希望将它们作为数字来处理。你可以在回调内的函数中更改它们（作为 forEach），但是在 d3.csv 中你可以使用访问器功能：

d3.csv("data.csv", conversor, function(data){
    //code here
});

function conversor(d){
    d.population = +d.population;
    d.area = +d.area;
    return d;
}

你也可以在 d3.tsv 中使用访问器，但不能在 d3.json 中使用。

注意： d3.csv 是一个异步函数，意味着它之后的代码会立即执行，甚至在加载 CSV 文件之前。所以，特别注意在回调中使用你的 data。