【 D3.js 进阶系列 — 1.2 】 读取 CSV 文件时乱码的解决方法

时间：2021-05-13 08:02:51

在 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. 解决方法

解决方法非常easy，可是假设不知道的话。是非常费心的。

一言以蔽之，解决方法须要： 在 D3 中可以手动设定用什么编码读取文件。

在 【

p=430">进阶系列 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){

}

如此，乱码的问题就可以解决。

谢谢阅读。

文档信息

相关文章