地图(上)— GeoJSON、投影与专题地图Copy Anchor Link

这一章讲什么(上半): D3 的地图能力全部建立在 d3-geo 模块上,而 d3-geo 又建立在 GeoJSON 这个开放数据格式上。本篇走通三件事:把 GeoJSON/TopoJSON 画成 SVG/Canvas、 理解并配置投影(一百多个函数、五大管道阶段)、画两种最经典的专题地图 (分级设色 choropleth 与点密度/分级圆点)。下半篇(交互地图:动画、缩放、旋转)见下一篇。

1. 顶层全景:一块数据 → 一张图Copy Anchor Link

  GeoJSON / TopoJSON 文件
      │ d3.json 加载;TopoJSON 先 topojson.feature() 转回 GeoJSON
      ▼
  投影函数 d3.geoXxx()  —— [经度,纬度] → [x,y] 像素(可 invert 逆算)
      │ 配进 d3.geoPath()
      ▼
  geoPath(GeoJSON 对象) → path 字符串(SVG)或 Canvas 命令
      │
      ▼
  <path d=…> × N(国家/城市/经纬网)

  图说:geoPath 是图形的门,投影是门里的换算器,GeoJSON 是门外 standard 的数据形状。

2. GeoJSON:地图的字母表Copy Anchor Link

RFC 7946 定义六种几何,坐标一律 [经度, 纬度] 二元数组(经度在前!)—— 这是最容易写反的地方¹:

D3 的扩展:{type:"Sphere"} 常常直接当 datum——一张天蓝色圆盘垫底, 正射投影下它就是圆;面片化的投影(interrupted)还拿它当裁剪掩膜²。

TopoJSON:把相邻多边形共享的边界抽成「弧段(arcs)」只存一份, 原书的世界地图从 924kB 缩到 102kB(约 9 倍)。代价是要用 topojson-client 转换:topojson.feature(tjdata, tjdata.objects['world']) 提取成 FeatureCollection 后,代码与 GeoJSON 完全一样。配套的 mesh()(公共边界线)、 merge()(合并成一块)、neighbors()(相邻关系)各有妙用³。

3. geoPath:地图版的路径生成器Copy Anchor Link

d3.geoPath() 与其他形状生成器同构:配投影、吃 GeoJSON、吐 path 字符串:

  const geoPath = d3.geoPath().projection(d3.geoMercator());

  // 画一个国家(单 Feature 直接喂)
  svg.append("path").attr("d", geoPath(feature));

  // 画世界(FeatureCollection:join features 数组)
  svg.selectAll("path").data(data.features).join("path").attr("d", geoPath);

专属方法三个:pointRadius(n或函数)(Point 几何渲染成的小圆半径)、 centroid(obj)(投影像素质心——摆标签用)、bounds(obj)(投影像素包围盒)。 配 context(ctx) 即切 Canvas 模式:每 feature beginPath() → geoPath(feature) → fill/stroke,千级要素时内存天壤之别⁴。

主线例子(马达加斯加):拿 d3.geoCentroid(geometry) 得地理质心 (返回 [46.74, -19.32]——经度纬度),喂给 geoMercator().center(质心).scale(1500), 一个国家的地图就居中放大了。更现代的做法是让投影自己 fit(见 §5)⁵。

4. 上下文图形:经纬网与圆Copy Anchor Link

d3.geoGraticule() 生成器吐一个 MultiLineString(经纬网),step([10,10]) 控制间隔 (默认 10°);再叠一个 step([0,90]) 的粗线版就是赤道。换投影时经纬网自动跟着变—— 因为它们走同一个 geoPath⁶。

d3.geoCircle() 生成「球面上的圆」Polygon:center([lon,lat]).radius(角度 0–90°)。 90° = 半球——画晨昏线、热带圈(地轴倾角 23.5°)、以及 Tissot 指示圆全靠它⁷。

5. 投影:一百个函数与一条五段管道Copy Anchor Link

5.1 选型:先分三大类,再按「保什么」挑Copy Anchor Link

没有完美投影,只有保什么的取舍:保形(conformal,Mercator:局部形状角度对、面积错)、 等积(equal-area:面积对、形状歪——专题地图比大小必须用等积)、 等距(equidistant:特定方向距离对)。Tissot 指示圆(球面等大的圆投影后变形) 是比较失真的标准仪器:圆变大 = 面积失真,圆变椭圆 = 形状失真⁸。

常用特例:rotate([0,±90,0]) 把投影转成极地视角;geoAlbersUsa() 是美国本土 +阿拉斯加+夏威夷的复合投影;geoInterruptedHomolosine() 等断裂投影需要额外的 包围球裁剪(用 Sphere 生成 clipPath)⁹。

5.2 五段管道与配置方法Copy Anchor Link

geoPath 渲染一条几何,内部走五个阶段——理解它们,配置方法才有归处¹⁰:

  ① 旋转(rotate([yaw,pitch,roll]))   ← 转的是「球」,投影前;三个欧拉角
  ② 预裁剪(clipAngle(度))            ← 球面小圆裁剪;正射默认 90°(藏背面半球)
  ③ 投影算法(geoXxx 本身)            ← 经纬度 → 平面坐标
  ④ 平面变换(center/translate/scale/angle) ← 转的是「图」,投影后;像素单位
  ⑤ 后裁剪(clipExtent([[x,y],[x,y]])) ← 视口矩形裁剪;Mercator 默认 ±85°

  图说:rotate 改变你「看哪里」,center/translate 改变图「摆哪里」,clipAngle/clipExtent 决定「剪掉什么」。

center([lon,lat]) 与 translate([x,y]) 都能让图居中,但前者是地理坐标(管道早期)、 后者是像素(管道末端);angle() 平面旋转、scale() 按投影单位缩放,锚点都是地理中心。 rotate 是投影前的三轴旋转(欧拉角)——要看不跨太平洋的航线或让南极居中,就转它¹¹。

5.3 fit 一族:别再手算 scaleCopy Anchor Link

fitExtent([[minX,minY],[maxX,maxY]], 对象) / fitSize([w,h], 对象) / fitWidth/fitHeight:自动算好 scale 与 translate,把任意 GeoJSON(或 Sphere) 嵌进指定视口——它们覆盖 center/scale/translate 的一切手动配置。 马达加斯加一例的手动 .center(质心).scale(1500) 应改写为:

  d3.geoMercator().fitExtent([[50,50],[w-50,h-50]], feature);

d3.geoBounds(obj) 返回球面包围盒、它本身就是合法 GeoJSON,可以继续喂给 fit 方法¹²。

6. 专题地图Copy Anchor Link

6.1 Choropleth(分级设色图)Copy Anchor Link

地图当底,区域颜色当数据。原书的口径值得背:比面积就用等积投影 (geoEqualEarth),比例尺别用线性——两个十亿人口国 + 平均四千万的数据, 线性色阶全挤在一头;解法 scaleSequentialPow(配色).exponent(0.25)(四次方根压缩), domain 反转让均值黄绿、高值红¹³:

  const color = d3.scaleSequentialPow(d3.interpolateRdYlGn).exponent(0.25)
                  .domain([popMax, popMin]);          // 反装:大人口 = 红
  svg.selectAll("path.feature").data(data.features).join("path")
    .attr("d", geoPath)
    .style("fill", d => color(d.properties.pop));

换主题 = 换数据源挂到 feature.properties(用 ISO 三字母码匹配): HDI、人口密度都是同一行代码换字段。上游数据准备(把属性并回 GeoJSON)通常该在服务器做, 在浏览器这一侧(客户端)合并只是教学演示¹⁴。

6.2 点密度图与分级圆点图Copy Anchor Link

点密度:每点 = 一个地点(GeoNames 十万城镇),pointRadius(0.5)、 用 MultiPoint/Point FeatureCollection 避免十万 DOM 节点——人的聚居形状直接显形¹⁵。

分级圆点:每城一圆,半径用 scaleSqrt(面积∝人口,视觉才不失真)、 人口升序排(小点画在上层不被大点盖)、透明度反向补偿(大城半透明防糊)、 颜色用反转的幂次顺序色阶¹⁶:

  const radius = d3.scaleSqrt().domain([min,max]).range([.1, 15]);
  geoPath.pointRadius(d => d.properties ? radius(d.properties.pop) : 0);

7. 量测工具Copy Anchor Link

单位换算一把尺:长度 ÷ 2π × 40075km = 公里;面积 ÷ 4π × 5.1 亿 km² = 平方公里。 geoPath.area 只有在等积投影下才与真实面积成比例——Mercator 里格陵兰比 南美洲「大」,球面量测揭穿这个谎言¹⁷。

三个球面小工具:geoInterpolate(a,b) 造两点间插值器(航线动画、tooltip 摆中点)、 geoRotation([yaw,pitch,roll]) 造旋转函数(带 invert)、geoContains(对象,点) 判定点落在哪个多边形里(悬停城市 → 高亮所属国)¹⁸。

8. 作者的判断与证据Copy Anchor Link

9. 边界与局限Copy Anchor Link

• 投影的数学(各投影的公式与推导)全书没有——一百个函数当目录用;
• 数据准备的 GIS 功夫(坐标系转换、shapefile 清洗、拓扑修复)明确推给离线工具与 mapshaper;
• d3-geo 不跟随 RFC 7946 全部细节(缠绕顺序 winding order),第 20 章给了修补工具清单;
• Canvas 地图的交互(取点、悬停)成本只提了一句,方案(geoContains/四叉树)散在练习里。

判断(我们的,不是书里的): 本篇反复出现一个模式:「数据 → 函数 → 图形」三段式 在地理数据上是最纯粹的——GeoJSON 是跨工具的标准中间格式,d3-geo 的每个函数 都是「吃标准、吐标准」的纯函数。这也是 D3 地图与「地图 SDK」(Leaflet/Mapbox) 的本质区别:D3 不给瓦片、不给底图样式,它给你的是投影与几何的计算内核; 想要现成的地图开发工具包(SDK,如 Leaflet/MapBox),书里也明说去找 d3-tile 或 Leaflet 集成。 如果错,会错在: 对「只要一张能缩放的交互地图」的需求,D3 是杀鸡用牛刀—— 瓦片方案的成本低一个量级;D3 地图的价值在「数据驱动」的部分(专题、流、自定义投影), 纯导航地图该用现成 SDK。这个边界书里散在几处,值得合并记住。

10. 可带走的Copy Anchor Link

1. GeoJSON 六种几何 + D3 的 Sphere;坐标永远是 [经度, 纬度];
2. TopoJSON = 共享弧段,文件小 ~9 倍;topojson.feature(数据, 数据.objects.key) 转回;
3. d3.geoPath().projection(投影) 是渲染入口;datum 单要素、join features 数组;
4. pointRadius 画点、centroid 摆标签、context 切 Canvas;
5. geoGraticule 经纬网(同 geoPath 自动适配投影)、geoCircle 球面圆(Tissot/晨昏线);
6. 投影三大类(圆柱/圆锥/方位);保形 vs 等积 vs 等距;比面积必须等积;
7. Tissot 圆:变大 = 面积失真,变扁 = 形状失真;
8. 管道五段:rotate(球面)→ clipAngle → 算法 → center/translate/scale/angle(平面)→ clipExtent;
9. fitExtent/fitSize(视口, 对象) 自动配比例,替代手算 center+scale;
10. choropleth:等积投影 + 幂次顺序色阶(exponent 0.25 压人口);
11. 点密度 pointRadius 0.5;分级圆点 scaleSqrt + 小点在上层;
12. 量测两套:球面(geoLength/geoArea/geoDistance,弧度制)与平面(geoPath 方法,像素);
13. geoInterpolate/geoRotation/geoContains 三个球面小工具。

11. 原文地图Copy Anchor Link