用 HTML + SVG + D3.js 生成点阵风格的世界与中国地图，并给出使用与调整方法。当前仓库已包含两种页面：dots.html（世界点阵）与 china-dots.html（中国点阵）。
点阵地图

设计目标

  • 还原参考图的点阵视觉：整齐网格、居中布局、白底浅灰点
  • 响应式自适应：不同屏幕尺寸下自动调节点密度与半径
  • 纯前端实现：无需后端，直接浏览器预览

数据源与投影

  • 地理数据：world-atlas@2（基于 Natural Earth）
  • 投影方式：Mercator（d3.geoMercator()）
  • 中国页面将中国（id=156）与台湾（id=158）组合为一个要素集合，以确保显示完整
    • 组合逻辑在 china-dots.html:54-56

点阵生成算法

  • 将画布按固定“步长”采样，计算每个网格中心点的经纬度，判断是否落在目标地理范围内
  • 命中即绘制一个圆点
  • 关键实现：china-dots.html:34-49

样式与参数

  • 点颜色：#E3E3E3（浅灰），位置在 china-dots.html:12
  • 点间距（密度）：spacing，越大越稀疏，位置在 china-dots.html:34
  • 点半径：r，与 spacing 关联，位置在 china-dots.html:35

示例参数（中国页面）：

const spacing = Math.max(12, Math.min(20, Math.round(Math.min(w,h)/65)));
const r = Math.max(2, Math.round(spacing/4));

常见调整

  • 更改点颜色：在 CSS 中修改 .dot{ fill: ... }（china-dots.html:12）
  • 调整密度：增大或减小 spacing（china-dots.html:34）
  • 调整点大小：修改 r 的计算方式（china-dots.html:35）
  • 调整边距与居中：修改 fitExtent 的边距 m（china-dots.html:32-33）

兼容性

  • 使用 D3 v7 与 TopoJSON v3，原生 SVG 渲染，现代浏览器兼容性良好
  • 响应式布局，桌面与移动端均可正常显示

说明与变更记录

  • 已将中国页面包含台湾区域（id=158）
  • 点颜色已调整为更浅的 #E3E3E3
  • 点密度已降低，使整体更接近参考图的稀疏程度