在入門系列的教程中，我們常用 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](http://tools.ietf.org/html/rfc4180) 中所示的描述。
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 。打開之后，像正常一樣輸入單元格的內容，假設輸入如下：
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2014/10/101.png)
（2）點擊“文件”，“另存為”。文件類型選擇 “CSV 文本”，底下再勾選上“編輯篩選設置”。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2014/10/102.png)
（3） 彈出的對話框中，選擇編碼（建議用 UTF8），字段分隔符選擇"逗號"，文本分隔符選擇“分號”。點擊“確定”。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2014/10/103.png)
（4） 保存成功后，用記事本打開，結果如下：
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2014/10/104.png)
在 D3.js 中，讀取 CSV 文件的函數只支持用逗號分隔單元格，所以請務必這樣保存。
## 3. 在?D3.js 中讀取 CSV 文件
在 D3.js 中提供了 d3.csv() 函數來讀取 CSV 文件。函數 API 可參見：?[https://github.com/mbostock/d3/wiki/CSV](https://github.com/mbostock/d3/wiki/CSV)?。
用它讀取文件的代碼如下：
~~~
d3.csv("table.csv",function(error,csvdata){
if(error){
console.log(error);
}
console.log(csvdata);
});
~~~
這段代碼是讀取了 table.csv 文件后，再輸出讀到的數據。輸出如下：
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2014/10/105.png)
我們可以看到，變量中 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](https://github.com/mbostock/d3/wiki/CSV) 中，看上去似乎還有一些函數： 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() 函數即可。
謝謝閱讀。
文檔信息
- 版權聲明：署名（BY）-非商業性（NC）-禁止演繹（ND）
- 發表日期：2014年10月03日
- 更多內容：[OUR D3.JS - 數據可視化專題站](http://www.ourd3js.com/) 和[CSDN個人博客](http://blog.csdn.net/lzhlzz)
- 備注：轉載請注明出處，謝謝
