d3.js——csv表格的讀取

一、在OpenOffice中編輯和保存csv文件

（1） 首先，打開 OpenOffice Calc 。就像 Microsoft Office 中有 Word、Excel、PowerPoint 一樣，OpenOffice 中編輯表示使用的是 Calc 。打開之後，像正常一樣輸入單元格的內容，假設輸入如下：

（2）點擊“文件”，“另存爲”。文件類型選擇 “CSV 文本”，底下再勾選上“編輯篩選設置”。

（3） 彈出的對話框中，選擇編碼（建議用 UTF8），字段分隔符選擇"逗號"，文本分隔符選擇“分號”。點擊“確定”。

（4） 保存成功後，用記事本打開，結果如下：

二、在d3.js中讀取csv文件

d3.csv("table.csv",function(error,csvdata){  
  
    if(error){  
        console.log(error);  
    }  
    console.log(csvdata);  
      
});  

這段代碼是讀取了 table.csv 文件後，再輸出讀到的數據。輸出如下：

我們可以看到，變量中 csvdata 是保存了一個數組，數組中的每個元素都一個對象，每個對象裏都有 age 、name、sex 三個成員變量。這三個成員變量正是所編輯的表格的頭一排的三個單元格。如此，我們就可以在代碼中這樣調用了。

for( var i=0; i<csvdata.length; i++ ){  
    var name = csvdata[i].name;  
    var sex = csvdata[i].sex;  
    var age = csvdata[i].age;  
    console.log( "name: " + name + "\n" +  
                 "sex: " + sex + "\n" +  
                 "age: " + age  );  
}  

三、將讀入的數據轉換爲字符串

d3.csv("table.csv",function(error,csvdata){       
    var str = d3.csv.format( csvdata );           
    console.log(str.length);  
    console.log(str);     
});  

CSV 格式是一種非常簡單的表格文件，它的每個單元格以逗號分隔，有的表格編輯軟件在保存的時候會讓選擇用分號或逗號等保存，這時候最好是選擇用逗號。

在 D3 中讀取 CSV 文件基本上只需要用 d3.csv() 函數即可。