世界地图-D3.js 版本
技术点
* projections 投影
投影函数，把[longitude 经度, latitude 纬度]转化成坐标[x, y]。
D3 已内置很多投影函数，面积（例如 geoAzimuthalEqualArea 和 geoConicEqualArea）、距离（例如 geoAzimuthalEquidistant 和 geoConicEquidistant）、角度（例如 geoEquirectangular 和 geoMercator）。
invert() 方法，可以把坐标[x, y] 反转回经纬度。
* 图形 svg｜图像 canvas 生成
svg 优点：方便交互。
canvas 优点：渲染速度快，内存效率高。
D3 官网示例分析
分析文件
D3 官网示例来自 observablehq.com 公司，采用 iframe 跨域 + next 构建。
断点捕获 iframe 通信，主要是 type: bundle 的通信数据，也可以直接观察 Sources 标签下的 eval 打包模块 。
调整优化
替换地图数据，改用小比例尺 1:110m，包含国家边界数据，改用 D3.json() 加载。绘制国家边界线，拖拽、缩放交互时因性能消耗较大，使用低精度地图数据，不绘制国家边界线。升级 D3 到 v7 版本。提取开源库 @observablehq/plot 中 projection，投影下拉框改原生。
改写 render 渲染函数，canvas -> svg
更新于[2026-08-10]
文章参考