浏览器验证记录 — 浙江省 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]，仅在投影调用时使用。

复现验证¶

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。