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

}

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

转载于:https://www.cnblogs.com/Hyacinth-Yuan/p/8093287.html

你可能感兴趣的:(D3进阶--读取csv文件)