【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取

在入门系列的教程中。咱们常用 d3.json() 函数来读取 json 格式的文件。json 格式很是强大。但对于普通用户可能不太适合，普通用户更喜欢的是用 Microsoft Excel 或 OpenOffice Calc 等生成的表格文件，因为简单易懂，easy编辑。

Microsoft Excel 通常会保存为 xls 格式。 OpenOffice Calc 通常会保存为 ods 格式。

这些格式做为表格文件来讲都很是强大。但要读取它们是有些麻烦的。D3 中也没有提供这个方案。但是表格软件都会支持生成csv 格式，它是一种很是主要的、通用的、简单的表格文件。

本文将会说明在 D3 中怎么读取和使用 csv 文件。

1. CSV 格式是什么

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

CSV 的文本格式例如如下：

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

理解起来很easy，每一个单元格之间用逗号隔开。假设想在单元格里输入逗号怎么办呢？用双引號框起来便可，例如如下：

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

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

 

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

Microsoft Excel 尽管强大倒是收费的。近几年我已不使用。 OpenOffice 不只开源免费，而且功能相同强大。如下来讲一下用 OpenOffice 怎么编辑和保存为 CSV 文件，固然通常本身摸索着也能会用，很easy。

（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 中保存的就是转换后的字符串。

5. 结束语

CSV 格式是一种很easy的表格文件，它的每个单元格以逗号分隔，有的表格编辑软件在保存的时候会让选择用分号或逗号等保存，这时候最好是选择用逗号。

在 D3 中读取 CSV 文件基本上仅仅需要用 d3.csv() 函数就能够。

谢谢阅读。

---

文档信息

• 版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）
• 发表日期：2014年10月03日
• 不少其它内容：OUR D3.JS - 数据可视化专题站 和CSDN我的博客
• 备注：转载请注明出处。谢谢