真的，我受够了。
每次看到有人在那吹嘘“三分钟上手D3地图”，我就想笑。三分钟？你连投影算法的数学原理都没搞懂，就想画出能看的地图？别逗了。
上周我为了赶一个项目，死磕 d3 geo 整整三天。头发掉了一把，咖啡喝了三升。最后做出来的东西，虽然有点瑕疵，但好歹能跑。今天我不讲那些高大上的理论，我就说说这三天里我遇到的坑，还有那些让我想砸键盘的瞬间。
首先，选投影。这绝对是新手最大的坑。
很多人上来就选 Mercator，觉得经典。结果呢？极地地区拉伸得亲妈都不认识。我在做全球数据分布的时候，发现北欧那些国家大得离谱，而赤道附近的国家又小得像芝麻。这种视觉偏差，客户一眼就能看出来，觉得你专业度不够。后来我换成了 Albers 投影，专门针对特定区域做等积投影，虽然代码稍微复杂点，但效果立马就不一样了。那种真实感，才是数据可视化该有的样子。
这里我要吐槽一下 D3 的文档。说实话，写得有点乱。
很多例子都是孤立的，你很难把它们拼凑成一个完整的流程。比如，我想在地图上加点位，还要加 Tooltip。官方文档里，点位的例子和 Tooltip 的例子是分开的。我试着把它们合在一起，结果发现坐标转换出了问题。
为什么？因为 GeoJSON 里的坐标是经纬度，而屏幕上的坐标是像素。
这个转换过程，就是 d3 geo 的核心。你得用 d3.geoProjection 或者现成的投影函数，比如 d3.geoMercator()。然后调用 .scale() 和 .translate() 来调整大小和位置。这一步，稍微手抖一下，整个地图就跑到屏幕外面去了，或者缩成一个点。我调了两个小时，就为了把地图居中。真的，那一刻我想把电脑扔出窗外。
还有，数据格式。
GeoJSON 是标准，但现实中的数据往往很脏。我拿到的数据，有些多边形的坐标顺序是乱的，有些甚至自相交。D3 虽然强大，但它不是魔法。它不会自动帮你修复坏数据。你得自己写代码去清洗。我用了一个简单的库来检查多边形，发现了好几个坏数据。修复这些坏数据的过程，枯燥得让人想睡觉。但没办法，这是必须做的。
再说说颜色。
很多教程喜欢用那种高饱和度的彩虹色，看起来花里胡哨，实际上根本看不出数据差异。我后来用了 Diverging Color Scheme，中间色用白色或浅灰，两端用深色。这样，数据的极值就很明显。而且，对于色盲用户来说，这种配色也更友好。细节决定成败，这句话在数据可视化里太重要了。
最后，性能问题。
如果你的地图上有成千上万个点，直接渲染会卡死浏览器。我试过，页面直接冻结。解决办法是，要么简化几何数据，要么用 Canvas 代替 SVG。D3 支持 Canvas，但配置起来比 SVG 麻烦。我最后选择了简化数据，把一些不重要的细节去掉。虽然地图看起来没那么精细，但流畅度提升了不止一个档次。用户在乎的是体验，不是你那微不足道的几何精度。
总之，d3 geo 不难，但也不简单。
它需要你懂一点数学，懂一点设计，还得有耐心去调试那些该死的坐标。别指望有什么捷径。每一行代码背后，都是你掉落的头发和喝掉的咖啡。但当你看到地图在屏幕上完美渲染的那一刻，那种成就感，真的无可替代。
如果你还在用那些过时的方法，或者被简单的教程误导，赶紧停下来。去读源码，去理解投影的原理。这才是正道。
别偷懒，数据不会骗人，但你的代码会。
希望这篇帖子能帮你少走点弯路。毕竟，我也踩过这些坑，不想看别人再踩一遍。如果有问题，评论区见。但别问我基础问题，我真的没空。
本文关键词：d3 geo
