纯HTML/CSS无法实现真正的地域热力图，必须用SVG+JS：为每个添加data-value属性，通过mouseenter事件动态更新固定定位tooltip的内容与位置，配合getScreenCTM()精准定位，注意数据名称、编码、坐标、单位四者严格对齐。
怎么用 HTML + CSS 实现鼠标悬停显示数值的地域热力图
纯 HTML/CSS 做不了真正的“热力图”——它没有地理坐标映射、没有颜色梯度插值、也不支持区域点击交互。所谓“地域热度地图”，实际是用 SVG 或 Canvas 绘制行政区划轮廓，再通过 fill 颜色 + title 或自定义 tooltip 实现悬停显示。浏览器原生不支持地理投影，必须依赖外部数据（如 GeoJSON）或手动描点。
最轻量可行方案：用 SVG 路径画各省，每个 <path></path> 加 data-value 属性存数值，用 CSS :hover::after 或 JS 监听 mousemove 显示 tooltip。
- 别试图用
<div> + 绝对定位模拟省份——坐标难对齐、缩放错位、移动端失效 <li> <code>title属性虽简单，但样式无法定制、不支持换行、移动端触发延迟高 - 真实项目中，
svg的viewBox必须和路径坐标匹配，否则图形挤压变形 - 避免用
offsetTop/offsetLeft计算位置——SVG 嵌套在缩放容器里时会偏移，改用getScreenCTM()+inverse()转换坐标 - 移动端需监听
touchstart并阻止默认行为，否则 tooltip 一闪即逝 - 数值为 0 或空字符串时，建议隐藏 tooltip 而非显示 “0”，避免误导
SVG 地图里怎么让 hover 提示显示具体数值
核心是把数值存在元素上，再用 JS 动态写入 tooltip 内容。CSS ::after 无法读取自定义属性值，必须靠 JS。
推荐做法：给每个 <path></path> 加 data-value="123" 和唯一 id，绑定 mouseenter 事件，更新一个固定 <div class="tooltip"> 的 <code>textContent 并定位到鼠标位置。
立即学习“前端免费学习笔记（深入）”；
<path id="beijing" data-value="98.7" d="M120,80 L130,85..." /> <div class="tooltip" style="position:fixed;pointer-events:none;"></div>
为什么用 D3.js 渲染热力图反而容易出错
D3 本身不提供中国行政区划数据，d3.geoPath() 需要 GeoJSON 输入，而网上下载的 GeoJSON 常见问题包括：坐标系是 WGS84 却当墨卡托用、省级边界缺失、直辖市被归入所在省、properties.name 字段名不统一（有的叫 name，有的叫 NAME_1）。
- 加载后发现地图倒置？大概率是 GeoJSON 坐标顺序反了（经度纬度写成纬度经度）
- 用
d3.scaleSequential(d3.interpolateInferno)配色时，若数值含负数，颜色会全发灰——得先用d3.extent()算真实范围再设域 - Chrome 下
transition().attr('fill', ...)在快速 hover 时会卡顿，建议加.interrupt()
纯前端做地域热力图，哪些数据环节最容易被忽略
数值和地图区域必须严格一一对应。常见断层：Excel 表里写的是“江苏”，GeoJSON 里是“江苏省”；或者“内蒙古自治区”被简写成“内蒙”；又或者“新疆生产建设兵团”根本不在标准行政区划 GeoJSON 中。
- 务必用
Array.prototype.find()对比前先统一 trim() 和全角/半角空格，中文顿号、逗号也要标准化 - 如果后端返回的是省级编码（如
110000），不要硬编码映射，应查民政部最新《县级以上行政区划代码》表 - 地图缩放时，tooltip 若用
clientX/clientY定位，在页面有滚动条且用户已滚动时会偏移——得加上window.scrollX和window.scrollY
真正麻烦的从来不是画出来，而是让每个数字落到它该在的那个县界里。坐标、名称、编码、单位，四者对不齐，悬停就只是个摆设。
