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){

}

从而可以避免读取文件时，出现乱码