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

在 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.dsv 的第二的参数中,其实可以添加编码的,形如:

如此,你可以定义自己的 csv 和 tsv 读取函数,编码如上添加即可。使用方法形如:

如此,乱码的问题即可解决。

谢谢阅读。

 


文档信息


【 D3.js 进阶系列 — 1.2 】 读取 CSV 文件时乱码的解决方法》上有2条评论

  1. 这篇文章真得非常有帮助,谢谢!

  2. 非常感谢您写了这麽多好文章,有您这样授业解惑的高人,让我充满希望。你写的文章从头到尾通读了一遍,虽然有的地方暂时还没有明白,但我会在读第二遍、第三遍的,希望您继续努力、加油,写出更多、更精彩的文章。我一定认真拜读、精心研究。再次感谢!!!

评论已关闭。