做 Geo 可视化这行九年，我见过太多项目因为一个坐标系搞砸。上周有个兄弟找我，说他的 d3.js geo 地图渲染出来全是歪的，省界对不上，城市点飘在海里。我一看代码，好家伙，经纬度搞反了，而且没做投影转换。这种低级错误，新手常犯，老手偶尔也犯。今天不整那些虚的，直接说点干货，帮你省下加班熬夜的时间。

先说坐标系。很多人拿到 GeoJSON 数据，直接扔进 d3.geoMercator() 就完事。别急，先看看你的数据源。如果是国内数据，大概率是 GCJ-02 或者 BD-09 加密坐标，直接用 WGS-84 的投影算法，地图肯定错位。我有个客户，做全国物流热力图，数据源是某大厂提供的，结果广东和广西边界完全对不上。后来发现得先做坐标转换，把加密坐标转回 WGS-84，再进 d3 处理。这一步漏掉，后面所有交互都是扯淡。

再聊聊投影选择。d3.js geo 提供了很多投影方式，比如 d3.geoAlbersUsa() 适合美国，但在中国，d3.geoMercator() 虽然常用，但高纬度地区变形严重。如果你要做全国地图，建议用 d3.geoConicConformal() 或者自定义投影。我试过用 d3.geoNaturalEarth1()，视觉效果不错，但性能稍微差点。具体选哪个，得看你的业务场景。要是做局部区域，比如长三角，直接用 d3.geoMercator() 设置好中心点和比例尺就行，简单粗暴有效。

还有数据量问题。现在大模型火，很多人喜欢把全国所有区县都画出来。别这么干，浏览器会卡死。我一般建议先聚合，或者用 WebGL 渲染。如果非要用 SVG，那就得精简数据。比如，把人口少于 10 万的区县合并，或者只展示地级市级别。我有个项目，初期渲染 2800 个多边形，页面加载要 5 秒，后来优化到 500 个主要城市，加载时间降到 0.5 秒，用户体验提升巨大。

交互设计也别忽视。鼠标悬停显示详情，这个功能看似简单，实则坑多。很多开发者直接用 d3.select().on('mouseover')，结果发现事件冒泡导致子元素事件失效。正确做法是用 d3.pointer() 获取相对坐标，或者用事件委托。还有 tooltip 的定位，别用绝对定位，容易溢出屏幕。我习惯用 d3.geoProjection 结合屏幕坐标转换，确保 tooltip 始终在鼠标附近。

最后说价格。外包做 d3.js geo 地图，行情大概在 5k 到 2w 之间，看复杂度。如果只是静态展示，5k 能搞定；如果要交互、动画、大数据量，2w 起步。别信那些几百块包干的，肯定是用现成模板，改改颜色就卖。这种代码后期维护简直是灾难。我见过最坑的，是用了过时的 d3 v3 版本，现在都 v7 了，文档都不全，调试起来想哭。

总结一下，做 d3.js geo 地图，核心就三点：坐标转换要准，投影选择要对，数据量要控。别贪多，别求快。遇到问题，先去查 d3 官方文档，别盲目百度，很多老帖子都是错的。

如果你正在被 d3.js geo 地图开发折磨，或者不确定你的数据该怎么处理，欢迎来聊聊。我不一定免费帮你改代码，但能给你指条明路，避免你走弯路。毕竟，这行水太深，踩坑一次，半年白干。

本文关键词：d3.js geo