在入門系列的教程中，我們常用 d3.json() 函式來讀取 json 格式的檔案。json 格式很強大，但對於普通使用者可能不太適合，普通使用者更喜歡的是用 Microsoft Excel 或 OpenOffice Calc 等生成的表格檔案，因為簡單易懂，容易編輯。

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

理解起來非常簡單，每一個單元格之間用逗號隔開。如果想在單元格里輸入逗號怎麼辦呢？用雙引號框起來就行，如下：

省份,人口,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.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 格式是一種非常簡單的表格檔案，它的每個單元格以逗號分隔，有的表格編輯軟體在儲存的時候會讓選擇用分號或逗號等儲存，這時候最好是選擇用逗號。

在 D3 中讀取 CSV 檔案基本上只需要用 d3.csv() 函式即可。

謝謝閱讀。

文件資訊

• 發表日期：2014年10月03日
• 備註：轉載請註明出處，謝謝