说实话，刚入行做数据可视化的时候，我也觉得只要把数据往地图上一扔，那效果肯定炸裂。那时候我不懂啥叫性能瓶颈，也不懂啥叫渲染层级，就闷头写代码。后来项目上线，客户一看，好家伙，加载转圈圈转了半分钟，手机直接发烫。那时候我才意识到，光有技术栈是不够的，还得懂背后的逻辑。今天就想跟大伙聊聊，关于 d3.geo mapbox 这玩意儿，到底该怎么用才不踩雷。
先说个真事儿。去年有个客户要做个全国物流热力图，数据量大概在五十万左右。我一开始想着，直接用 d3 的 geo 投影把坐标转一下，然后扔进 mapbox gl js 里渲染。听起来挺美对吧？结果一测，FPS 直接掉到个位数。为啥？因为 d3 的 geo 计算是在主线程跑的，五十万个点，每个点都要算经纬度转屏幕坐标，浏览器直接卡死。这时候我就明白了，别一上来就搞全量渲染，得做文章。
很多人问，到底是用 d3 还是用 mapbox 原生 API？其实这俩不冲突，但分工得明确。mapbox gl js 底层用的是 WebGL，渲染矢量切片那是真快。而 d3.geo 强在投影变换，比如你想搞个墨卡托投影或者阿尔伯斯投影，d3 封装好的函数拿来就用，省心。但是！千万别在渲染循环里调用 d3.geo 的方法。正确的姿势是，在数据预处理阶段，用 d3 把原始坐标转成 mapbox 能识别的格式，或者直接转成 GeoJSON 标准格式，然后再丢给 mapbox。
这里有个坑，很多新手容易忽略。就是坐标系的转换。mapbox 默认是 WGS84，但有些老旧系统或者特定行业的数据可能是 GCJ02 或者 BD09。如果你直接用 d3.geo 去套，出来的图全飘到太平洋去了。我当时为了调这个偏移，花了整整两天时间对坐标。建议大家在拿到数据第一时刻，先确认坐标系，再用 d3.geo 做必要的投影变换，最后通过 mapbox 的 setCenter 和 setZoom 来定位。
再说说性能优化。对于十万级以上的数据点，别用 circle-layer 一个一个画，那是自杀行为。得用 heatmap-layer 或者 point-cluster。我在做省级粒度数据时，发现用 d3 生成聚合后的 GeoJSON 数据，再传给 mapbox，渲染速度提升了至少十倍。这中间的数据清洗和聚合逻辑，才是体现功力的地方，而不是单纯炫技。
还有，别迷信“完美”的代码。实际项目中，你总会遇到数据缺失、坐标异常的情况。比如某个城市的经纬度是 null，或者格式不对。这时候 d3 可能会报错，mapbox 可能会渲染失败。所以，健壮的数据校验代码比花哨的动画效果重要得多。我在项目里加了一层 try-catch 和空值判断，虽然代码丑了点，但上线后没出过任何线上故障。
最后总结一下，d3.geo mapbox 这个组合，核心在于“各司其职”。d3 负责算，mapbox 负责画。别把计算压力堆在渲染层，也别把渲染逻辑写在数据预处理里。记住，客户要的是流畅的体验，不是你代码里用了多少高阶函数。
如果你还在纠结怎么选型，或者遇到了具体的渲染卡顿问题，不妨回头看看数据预处理那一步。很多时候，问题不在地图库本身，而在我们对待数据的态度。别怕麻烦，把基础打牢，比啥都强。毕竟，跑通 demo 和跑通生产环境，中间隔着的不是技术，是经验。希望这点血泪教训，能帮你省点头发。
