# 浏览器验证记录 — 浙江省 11 市宜居度地图

验证工具：Playwright + Chromium 1228（`C:/Users/admin/AppData/Local/ms-playwright/chromium-1228/chrome-win64/chrome.exe`）
验证脚本：`verify.js`
报告输出：`verify-report.json`
截图：`screenshot.png`

## 验证方式

单浏览器会话内完成「打开 → 校验 → 交互 → 截图」，避免孤立会话重置页面（技能 `verification-and-boundaries.md` 的 Session rule）。

```
page.goto(file:///.../index.html, waitUntil: "load")
→ page.evaluate(校验脚本)
→ page.locator(".rank-item").nth(4).click()  // 交互测试
→ page.screenshot(fullPage: true)
```

## 校验结果

| 检查项 | 期望 | 实测 | 结果 |
|---|---|---|---|
| D3 加载 | `typeof d3 !== "undefined"` | `object` | ✅ |
| 地理数据加载 | `window.MAPS` 存在 | true | ✅ |
| 评分数据加载 | `window.LIVABILITY_DATA` 存在 | true | ✅ |
| 区域 path 数 | 11 | 11 | ✅ |
| `.map-region` 数 | 11 | 11 | ✅ |
| 代表区域 bbox | 地图尺寸、非零 | `{x:147.5, y:112.5, w:287.5, h:192.2}` | ✅ |
| 高/低值填充差异 | ≥2 种不同填充 | 10 种不同填充 | ✅ |
| 控制台错误 | 0 | 0 | ✅ |
| 远程网络请求 | 0（离线声明） | 0 | ✅ |
| 城市标注数 | 11 | 11 | ✅ |
| 分数标注数 | 11 | 11 | ✅ |
| 排行榜条目 | 11 | 11 | ✅ |
| 图例色块 | ≥5 | 7 | ✅ |
| 五维明细行 | 5 | 5 | ✅ |
| 客观指标项 | 10 | 10 | ✅ |

## 交互验证

| 操作 | 期望 | 实测 | 结果 |
|---|---|---|---|
| 初始加载 | 默认选中第 1 名 | 详情面板显示「杭州 85.1 · A」 | ✅ |
| 点击排行榜第 5 项 | 详情与地图同步切换 | 详情「温州 79.8 · B」，激活区域 `温州市` | ✅ |

## 配色梯度验证

填充色与综合分严格单调对应（绿色系，深 = 高）：

| 城市 | 综合分 | 填充色 |
|---|---|---|
| 杭州 | 85.1 | `rgb(29, 77, 56)` |
| 宁波 | 81.1 | `rgb(113, 163, 123)` |
| 温州 | 79.8 | `rgb(151, 188, 148)` |
| 嘉兴 | 77.8 | `rgb(204, 217, 188)` |
| 湖州 | 77.2 | `rgb(217, 223, 198)` |
| 金华 | 76.5 | `rgb(231, 230, 210)` |
| 衢州 | 76.1 | `rgb(239, 233, 216)` |

## 离线验证说明

远程请求计数为 **0**，且通过 `page.on("request")` 拦截确认无任何非 `file://` 请求。库、数据、字体、瓦片、图片全部本地。

**离线分级：完全离线 D3**。声明成立。

## 渲染实现说明（重要）

本图**未使用 `d3.geoPath()`**，而是手工调用投影函数拼接 SVG path 字符串。

原因：`d3.geoPath()` 在本数据集上会产生跨越 ±180° 经线的错误线段，导致：
- `getBBox()` 返回 `{x:-21627, w:26389}`（应为画布内的数百像素）
- 11 个城市的 bbox 完全相同
- 每个城市都被绘制成覆盖整张画布的大矩形

排查确认**源数据本身无误**（杭州环 555 点、首尾闭合、最大相邻跨度 0.069°、无 NaN、无越界坐标），问题出在 `d3.geoPath` 的地理流处理层。

手工投影实现见 `index.html` 中的 `geoToPath()` 函数，输出结果完全可控且可验证。

## 投影参数

| 参数 | 值 | 依据 |
|---|---|---|
| 类型 | `d3.geoMercator()` | 浙江纬度范围适合墨卡托 |
| center | `[120.35, 29.15]` | 浙江省几何中心 |
| scale | 6929 | 由全省投影跨度反算（宽度约束 8574、高度约束 6929，取小值） |
| translate | `[390, 310]` | 画布 `780 × 620` 的中心 |
| viewBox | `0 0 780 620` | 固定坐标系 |

坐标顺序遵循 GeoJSON 标准 `[longitude, latitude]`，仅在投影调用时使用。

## 复现验证

```bash
cd E:/SelfTest/WorkBuddyPrj/outputs/zhejiang-livability-map
NODE_PATH="C:/Users/admin/.workbuddy/binaries/node/workspace/node_modules" \
  "C:/Users/admin/.workbuddy/binaries/node/versions/22.22.2-3/node.exe" verify.js
```

输出写入 `verify-report.json`，截图写入 `screenshot.png`。