【 D3.js 進階系列 — 1.2 】 讀取 CSV 檔案時亂碼的解決方案

標籤：d3   csv   dsv   亂碼   gb2312   

在 D3 中使用 d3.csv 讀取 CSV 檔案時，有時會出現亂碼問題。怎麼解決呢？

1. 亂碼問題

使用 d3.csv 讀取 xxx.csv 檔案時，如果 xxx.csv 檔案使用的是 UTF-8 編碼，不會有什麼問題。當然，個人認為盡量使用 UTF-8 編碼，可以在同一編碼內使用各國文字。

但是，如果 xxx.csv 檔案使用的是 utf-8 編碼，使用 Microsoft Excel 開啟的時候，可能會出現亂碼，因為國內的 Excel 預設使用 GB2312 開啟，而且在開啟的時候不能選擇編碼（ OpenOffice 沒有這個問題 ）。當然，在 Excel 中也是有方法可以用 utf-8 編碼開啟的。具體的方法可以到網上去查。

GB2312 和 GB18030 等是國內常用的編碼，如果 CSV 檔案用這兩種編碼儲存，那麼用 Excel 可直接開啟而不出現亂碼。但是，如果用了，用 d3.csv 讀取的時候，又會在可視化的時候出現亂碼，這正是問題所在。

2. 解決方案

解決方案很簡單，但是如果不知道的話，是很費心的。

一言以蔽之，解決方案需要： 在 D3 中能夠手動設定用什麼編碼讀取檔案。

在 【進階系列 1.0】 和 【進階系列 1.1】中，使用了 d3.csv 和 d3.tsv 兩個函數，也提到了，它們的區別僅僅是分隔字元不同。也提到了，它們實質上都是 d3.dsv 函數，即：

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

在 d3.dsv 的第二的參數中，其實可以添加編碼的，形如：

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

如此，你可以定義自己的 csv 和 tsv 讀取函數，編碼如上添加即可。使用方法形如：

csv("xxx.csv",function(error,csvdata){}tsv("xxx.tsv",function(error,tsvdata){}

如此，亂碼的問題即可解決。謝謝閱讀。

文檔資訊

• 著作權聲明：署名（BY）-非商業性（NC）-禁止演繹（ND）
• 發表日期：2014年10月18日
• 更多內容：OUR D3.JS - 資料視覺效果專題站 和CSDN個人部落格
• 備忘：轉載請註明出處，謝謝

【 D3.js 進階系列 — 1.2 】 讀取 CSV 檔案時亂碼的解決方案