TypeScript项目使用d3.json读取JSON文件报SyntaxError问题求助

咱们先从报错和代码细节入手，拆解你遇到的核心问题：

1. 报错根源：请求返回的不是合法JSON #

你看到的SyntaxError: Unexpected token T in JSON at position 0，本质是d3.json请求到的内容根本不是你写的JSON文件——返回的文本第一个字符是T，大概率是服务器返回的错误页面（比如404提示的开头是Text not found，或者HTML的<title>标签内容开头是T）。这说明你的文件路径配置有问题，或者打包工具（webpack）没有正确处理JSON文件的位置。

2. 代码里的两个明显问题 #

（1）async/await与回调混用 #

你用了await但同时传入了回调函数，这在d3的不同版本里会有冲突：

• 如果是d3 v5+：d3.json返回的是Promise，不需要回调，直接用await配合try/catch即可，回调写法会导致逻辑混乱。
• 如果是d3 v4及更早：d3.json是基于回调的，不支持await，你的await根本起不到等待异步请求的作用。

（2）错误的对象转字符串方式 #

你写了storeData(data.toString())，这会把JSON对象转成毫无意义的"[object Object]"，完全不是你需要的JSON字符串，应该用JSON.stringify(data)来序列化对象。

3. 具体解决方案 #

方案一：修正d3.json的使用方式（适配v5+） #

如果你的d3是v5或更高版本，改成Promise+async/await的正确写法，去掉回调：

export async function setSelectConfiguration(
  filenameJson: string,
  storeData: (str: string) => void,
  element: JQuery,
  listenerFunction: (e: JQueryEventObject) => void
) {
  try {
    // 直接await d3.json的Promise返回值，用参数filenameJson而非写死路径
    const data = await d3.json(filenameJson);
    console.log(data);
    storeData(JSON.stringify(data)); // 用JSON.stringify替代toString()
  } catch (error) {
    console.error("加载JSON失败:", error);
  }
  element.on("change", listenerFunction);
}

方案二：解决文件路径/打包配置问题 #

这是导致你报错的核心原因——纯JS环境下路径没问题，但webpack打包后静态资源位置会变化：

• 用copy插件同步JSON文件：在webpack.config.js中配置copy-webpack-plugin，把JSON文件从源码目录复制到打包输出目录：

  const CopyWebpackPlugin = require('copy-webpack-plugin');
  module.exports = {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: './src/filename2.json', to: './' } // 根据你的实际文件路径调整
        ]
      })
    ]
  };
  

• 直接导入JSON文件（更简单）：在tsconfig.json中开启JSON模块支持，然后直接导入JSON，不需要用d3.json请求：

  // tsconfig.json配置
  {
    "compilerOptions": {
      "resolveJsonModule": true,
      "esModuleInterop": true,
      // 其他原有配置...
    }
  }
  

  代码中直接导入使用：

  import jsonData from './filename2.json'; // 路径根据实际位置调整
  
  export async function setSelectConfiguration(
    filenameJson: string,
    storeData: (str: string) => void,
    element: JQuery,
    listenerFunction: (e: JQueryEventObject) => void
  ) {
    console.log(jsonData);
    storeData(JSON.stringify(jsonData));
    element.on("change", listenerFunction);
  }
  

方案三：检查d3版本与模块导入 #

如果你的项目依赖了旧版的d3-request（报错里出现了d3-request.node.js），建议升级到最新版d3——d3-request已经被弃用，新版的d3-fetch（包含在d3核心包中）更稳定且原生支持Promise。

最后验证步骤 #

1. 打开浏览器开发者工具的Network面板，查看filename2.json的请求状态：
   • 如果是404，说明路径配置错误，调整文件位置或webpack插件配置。
   • 如果返回的是HTML或其他文本，说明请求地址不对，修正路径。
2. 确认d3版本，确保代码写法与版本匹配。

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