D3.js新手求助：美国地图渲染失败，出现topojson未定义错误

算力阿峰

2026-4-30

解决D3.js美国地图渲染时的TopoJSON未定义错误

Hey there! Let's tackle this issue step by step—your error message gives us a clear starting point.

问题原因

控制台抛出的 Uncaught (in promise) ReferenceError: topojson is not defined 说明：你在代码里调用了 topojson.feature() 来处理TopoJSON格式的地图数据，但没有引入TopoJSON的库文件。D3.js本身并不包含TopoJSON相关的解析工具，这部分功能需要单独加载。

修复步骤

1. 引入TopoJSON库

在你的项目（比如Codepen的JS设置面板）中添加TopoJSON的CDN资源链接，推荐使用稳定版本：

<script src="https://unpkg.com/topojson@3.0.2/dist/topojson.min.js"></script>

在Codepen里操作的话，进入「Settings」→「JavaScript」→「Add External Scripts/Pens」，粘贴上面的链接并保存即可。

2. 完善代码逻辑

确保你的数据请求和解析逻辑正常，同时建议添加Promise的错误捕获，方便排查后续问题：

d3.json(COUNTIES)
  .then(data => {
    // 现在topojson对象已经可以正常访问了
    let states = topojson.feature(data, data.objects.states);
    // 在这里添加你的地图渲染代码（比如创建路径、绑定数据等）
    console.log("解析后的州数据:", states);
  })
  .catch(error => {
    console.error("加载或解析地图数据时出错:", error);
  });