前言

之前在入門系列的教程中，我們常用 d3.json() 函數(shù)來讀取 json 格式的文件。json 格式很強(qiáng)大，但對(duì)于普通用戶可能不太適合，普通用戶更喜歡的是用 Microsoft Excel 或 OpenOffice Calc 等生成的表格文件，因?yàn)楹?jiǎn)單易懂，容易編輯。

Microsoft Excel 通常會(huì)保存為 xls 格式， OpenOffice Calc 通常會(huì)保存為 ods 格式。這些格式作為表格文件來說都很強(qiáng)大，但要讀取它們是有些麻煩的，D3 中也沒有提供這樣的方法。但是表格軟件都會(huì)支持生成csv 格式，它是一種非?；镜摹⑼ㄓ玫?、簡(jiǎn)單的表格文件。本文將會(huì)說明在 D3 中怎么讀取和使用 csv 文件，下面來看看詳細(xì)的介紹：

1. CSV 格式是什么

CSV(Comma Separated Values)，逗號(hào)分隔值，它是以純文本形式存儲(chǔ)表格數(shù)據(jù)的，每個(gè)單元格之間用逗號(hào)（Comma）分隔。CSV格式?jīng)]有一個(gè)通用標(biāo)準(zhǔn)，通常使用的是RFC 4180 中所示的描述。
CSV 的文本格式如下：

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

理解起來非常簡(jiǎn)單，每一個(gè)單元格之間用逗號(hào)隔開。如果想在單元格里輸入逗號(hào)怎么辦呢？用雙引號(hào)框起來就行，如下：

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

有些軟件在保存CSV格式時(shí)，會(huì)讓你選擇使用什么符號(hào)（逗號(hào)、分號(hào)等）來分隔單元格，盡量選擇逗號(hào)吧。

2. 在 OpenOffice 中編輯和保存 CSV 文件

Microsoft Excel 雖然強(qiáng)大卻是收費(fèi)的，近幾年我已不使用。 OpenOffice 不僅開源免費(fèi)，而且功能同樣強(qiáng)大。下面來說一下用 OpenOffice 怎么編輯和保存為 CSV 文件，當(dāng)然一般自己摸索著也能會(huì)用，非常簡(jiǎn)單。

（1） 首先，打開 OpenOffice Calc 。就像 Microsoft Office 中有 Word、Excel、PowerPoint 一樣，OpenOffice 中編輯表示使用的是 Calc 。打開之后，像正常一樣輸入單元格的內(nèi)容，假設(shè)輸入如下：

（2）點(diǎn)擊“文件”，“另存為”。文件類型選擇 “CSV 文本”，底下再勾選上“編輯篩選設(shè)置”。

（3） 彈出的對(duì)話框中，選擇編碼（建議用 UTF8），字段分隔符選擇"逗號(hào)"，文本分隔符選擇“分號(hào)”。點(diǎn)擊“確定”。

（4） 保存成功后，用記事本打開，結(jié)果如下：

在 D3.js 中，讀取 CSV 文件的函數(shù)只支持用逗號(hào)分隔單元格，所以請(qǐng)務(wù)必這樣保存。

3. 在 D3.js 中讀取 CSV 文件

在 D3.js 中提供了 d3.csv() 函數(shù)來讀取 CSV 文件。函數(shù) 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 文件后，再輸出讀到的數(shù)據(jù)。輸出如下：

我們可以看到，變量中 csvdata 是保存了一個(gè)數(shù)組，數(shù)組中的每個(gè)元素都一個(gè)對(duì)象，每個(gè)對(duì)象里都有 age 、name、sex 三個(gè)成員變量。這三個(gè)成員變量正是所編輯的表格的頭一排的三個(gè)單元格。如此，我們就可以在代碼中這樣調(diào)用了。

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. 將讀入的數(shù)據(jù)轉(zhuǎn)換為字符串

在 D3 的官方 API 中，看上去似乎還有一些函數(shù)： parse 、parseRows、format、formatRows。但經(jīng)過我的試驗(yàn)，只有 format 一個(gè)函數(shù)可以使用，其它的都是在 D3 內(nèi)部使用的?；旧闲枰x入 CSV 的數(shù)據(jù)的情況下，只要有上面第3節(jié)所敘述的內(nèi)容就足夠了。

下面是 format 的使用方法。

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

上面的代碼，str 中保存的就是轉(zhuǎn)換后的字符串。

總結(jié)

CSV 格式是一種非常簡(jiǎn)單的表格文件，它的每個(gè)單元格以逗號(hào)分隔，有的表格編輯軟件在保存的時(shí)候會(huì)讓選擇用分號(hào)或逗號(hào)等保存，這時(shí)候最好是選擇用逗號(hào)。

在 D3 中讀取 CSV 文件基本上只需要用 d3.csv() 函數(shù)即可。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論