【 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我的博客
• 備註：轉載請註明出處。謝謝