從 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。