D3進階--讀取csv文件

在 D3.js 中提供了 d3.csv() 函數來讀取 CSV 文件。函數 API 可參見： https://github.com/mbostock/d3/wiki/CSV 

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

變量中 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);    
});

利用format函數，str 中保存的就是轉換後的字符串

與csv比較類似的還有TSV文件，它是以製表分割符來分隔的

讀取方法以下：

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

其實，在D3中讀取csv和TSV都是經過d3調用dsv函數來實現的

例如讀取以分號分割的文件，代碼以下（注意：dsv可做函數）：

var dsv = d3.dsv(";", "text/plain");
dsv("table.dsv",function(error,dsvdata){
    if(error)
        console.log(error);
    console.log(dsvdata);
});

 

 在 d3.dsv 的第二的參數中，其實能夠添加編碼的，形如：

var csv = d3.dsv(",", "text/csv;charset=gb2312");
var tsv = d3.dsv("    ", "text/tab-separated-values;charset=gb2312");

csv("xxx.csv",function(error,csvdata){

}

tsv("xxx.tsv",function(error,tsvdata){

}

從而能夠避免讀取文件時，出現亂碼