D3.js中如何读取CSV表格文件

这篇文章将为大家详细讲解有关D3.js中如何读取CSV表格文件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

1. CSV 格式是什么

CSV(Comma Separated Values)，逗号分隔值，它是以纯文本形式存储表格数据的，每个单元格之间用逗号（Comma）分隔。CSV格式没有一个通用标准，通常使用的是RFC 4180 中所示的描述。
CSV 的文本格式如下：

省份,人口,GDP 
山东,9000,50000 
浙江,5000,20000

理解起来非常简单，每一个单元格之间用逗号隔开。如果想在单元格里输入逗号怎么办呢？用双引号框起来就行，如下：

省份,人口,GDP 
山东,"9,000","50,000" 
浙江,"5,000","20,000"

有些软件在保存CSV格式时，会让你选择使用什么符号（逗号、分号等）来分隔单元格，尽量选择逗号吧。

2. 在 OpenOffice 中编辑和保存 CSV 文件

Microsoft excel 虽然强大却是收费的，近几年我已不使用。 OpenOffice 不仅开源免费，而且功能同样强大。下面来说一下用 OpenOffice 怎么编辑和保存为 CSV 文件，当然一般自己摸索着也能会用，非常简单。

（1） 首先，打开 OpenOffice Calc 。就像 Microsoft Office 中有 Word、Excel、PowerPoint 一样，OpenOffice 中编辑表示使用的是 Calc 。打开之后，像正常一样输入单元格的内容，假设输入如下：

（2）点击“文件”，“另存为”。文件类型选择 “CSV 文本”，底下再勾选上“编辑筛选设置”。

（3） 弹出的对话框中，选择编码（建议用 UTF8），字段分隔符选择"逗号"，文本分隔符选择“分号”。点击“确定”。

（4） 保存成功后，用记事本打开，结果如下：

在 D3.js 中，读取 CSV 文件的函数只支持用逗号分隔单元格，所以请务必这样保存。

3. 在 D3.js 中读取 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); 
  
});

这段代码是读取了 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 ); 
}

4. 将读入的数据转换为字符串

在 D3 的官方 API 中，看上去似乎还有一些函数： parse 、parseRows、fORMat、formatRows。但经过我的试验，只有 format 一个函数可以使用，其它的都是在 D3 内部使用的。基本上需要读入 CSV 的数据的情况下，只要有上面第3节所叙述的内容就足够了。

下面是 format 的使用方法。

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

上面的代码，str 中保存的就是转换后的字符串。

关于“D3.js中如何读取CSV表格文件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。