如何在D3.js中正确读取非标准编码的CSV文件

老兄，这问题我之前也碰到过——你的CSV文件肯定是用**ISO-8859-1（Latin-1）**编码保存的，而D3.js的d3.csv()默认会用UTF-8解析，带重音的字符自然就出现乱码了。给你几个靠谱的解决办法：

方法1：动态转码读取（无需修改源文件） #

先用d3.text()读取原始文本内容，再用浏览器的TextDecoder指定编码转成UTF-8，最后交给d3.csvParse解析：

d3.text('small.csv')
  .then(rawText => {
    // 将Latin-1编码的文本转为UTF-8
    const decoder = new TextDecoder('iso-8859-1');
    const decodedText = decoder.decode(new Uint8Array([...rawText].map(c => c.charCodeAt(0))));
    // 解析为CSV数据对象
    const data = d3.csvParse(decodedText);
    console.log(data);
  });

方法2：转换源文件编码（一劳永逸） #

如果有权限修改源文件，直接把CSV转成UTF-8编码就行：

• 用VS Code、Notepad++这类编辑器打开small.csv
• 找到编辑器右下角的编码选项（比如VS Code右下角会显示当前编码）
• 选择“转为UTF-8”并保存文件
  之后再用你原来的d3.csv('small.csv').then(data => console.log(data))就能正常读取了。

方法3：用原生Fetch手动处理 #

也可以绕过D3的默认读取逻辑，直接用Fetch API处理二进制数据再转码：

fetch('small.csv')
  .then(res => res.arrayBuffer())
  .then(buffer => {
    const decoder = new TextDecoder('iso-8859-1');
    const csvText = decoder.decode(buffer);
    const data = d3.csvParse(csvText);
    console.log(data);
  });

个人建议优先选方法2，毕竟转一次编码之后，所有工具读取都不会有问题；如果没法改源文件，就用方法1或3动态处理~

内容的提问来源于stack exchange，提问作者paszo