【 D3.js 進階系列 — 1.1 】 其他表格檔案的讀取

CSV 表格檔案是以逗号作為單元分隔符的，其他還有以制表符 Tab 作為單元分隔符的 TSV 檔案，還有人為定義的其它分隔符的表格檔案。本文将說明在 D3 中如何讀取它們。

1. TSV 表格檔案是什麼

TSV(Tab Separated Values)，制表分隔值，它和 CSV 檔案僅僅是分隔符不一緻。它的格式如下：

name	age
張三	22
李四	24
           

2. D3 中讀取 TSV 檔案

在 D3 中讀取 TSV 檔案的方法和 CSV 檔案是一樣的，隻要更改一下函數名即可。方法如下：

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

我們可以看到，這和【進階系列 — 1.0】是基本一樣的，詳細說明可參見此文。

3. D3 中讀取 CSV 和 TSV 的本質

在上面兩節我們可以看到，讀取 CSV 和 TSV 驚人地相似。其實它們本質上都是一個函數，我們來看看 D3 源碼中的定義：

d3.csv = d3.dsv(",", "text/csv");
  d3.tsv = d3.dsv("	", "text/tab-separated-values");
           

可以看到，它們其實都是 d3.dsv 函數。那麼這個 dsv 函數是怎麼回事呢？dsv 其實可以讀取以任意字元或字元串作為分隔符的表格檔案。接下來我們來試試用 dsv 函數讀取以分号作為分隔符的表格檔案。假設有如下檔案：

name;age
張三;22
李四;24
           

讀取的代碼如下：

var dsv = d3.dsv(";", "text/plain");
			dsv("table.dsv",function(error,dsvdata){
				if(error)
					console.log(error);
				console.log(dsvdata);
			});
           

先用 d3.dsv(";", "text/plain"); 定義分隔符為分号，再按照讀取 csv 和 tsv 檔案一樣的方法讀取即可。但要注意第二行不再需要用 d3.dsv ，因為變量 dsv 已經是一個函數了。

4. 結束語

CSV 檔案和 TSV 檔案僅僅是分隔符不同，它們的本質都是調用的 DSV 函數，是以 DSV 函數的掌握至關重要。

謝謝閱讀。

文檔資訊

• 版權聲明：署名（BY）-非商業性（NC）-禁止演繹（ND）
• 發表日期：2014年10月03日
• 更多内容：OUR D3.JS - 資料可視化專題站 和 CSDN個人部落格
• 備注：轉載請注明出處，謝謝