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() 函数即可。