d3.js可实现高度自定义热力图交互：一、svg矩形事件绑定动态着色；二、浮动tooltip展示动态数据；三、zoom行为支持缩放平移；四、表头点击联动行列高亮；五、滑块过滤实时重绘。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜
如果您希望在网页中创建具备高度自定义交互能力的热力图，D3.js 提供了底层 SVG 控制与数据驱动更新机制，允许开发者绕过封装库直接构建响应式热力图行为。以下是实现该目标的多种方法：
一、基于 SVG 矩形元素绑定事件并动态着色
该方法利用 D3 的 selection 机制为每个热力单元（<rect></rect>）绑定鼠标事件，并通过修改其 fill 属性实时反馈交互状态，适用于需要精细控制单格响应逻辑的场景。
1、使用 d3.scaleLinear() 或 d3.scaleOrdinal() 构建颜色映射函数，将数值映射至颜色值。
2、调用 .selectAll("rect").data(data).enter().append("rect") 渲染热力单元，设置 x、y、width、height 及初始 fill。
3、对每个 rect 调用 .on("mouseover", function(event, d) { d3.select(this).attr("fill", "orange"); }) 实现悬停高亮。
4、添加 .on("click", function(event, d) { console.log("点击单元：", d); }) 捕获点击并触发自定义逻辑。
5、通过 .on("mouseout", function(event, d) { d3.select(this).attr("fill", colorScale(d.value)); }) 恢复原始配色。
二、引入 Tooltips 并绑定动态内容
该方法借助绝对定位的 <div> 元素作为浮动提示框，在鼠标移动时实时计算位置并注入数据信息，避免 SVG 内文本渲染限制，提升可读性与样式自由度。<p>1、在 HTML 中预先插入一个空的 <code><div id="tooltip" style="position: absolute; pointer-events: none; opacity: 0;"></div>。
2、使用 d3.select("#tooltip") 获取该元素引用，并在 mouseover 回调中调用 .html() 注入格式化文本，例如 "行：" + d.row + "，列：" + d.col + "，值：" + d.value。
3、在 mousemove 回调中调用 .style("left", (event.pageX + 10) + "px").style("top", (event.pageY - 10) + "px") 追踪鼠标偏移。
4、在 mouseout 回调中执行 .transition().duration(200).style("opacity", 0) 实现淡出效果。
5、在 mouseover 回调末尾追加 .style("opacity", 1) 确保提示框可见。
三、集成缩放与平移行为以支持大数据热力图浏览
该方法通过 D3 的 zoom 行为绑定到包裹热力图的 <g></g> 容器，使用户可通过滚轮或拖拽操作调整视图范围，适用于行列维度超过百级的密集热力图。
1、创建 const zoom = d3.zoom().scaleExtent([0.5, 8]).on("zoom", zoomed)，其中 zoomed 是处理变换的函数。
2、将热力图所有 rect 和坐标轴元素包裹进一个 <g id="heatmap-group"></g> 中。
3、对 #heatmap-group 的父容器（如 <svg></svg>）调用 .call(zoom) 启用缩放。
4、在 zoomed 函数内，使用 d3.event.transform 获取 k（缩放系数）、x 和 y（平移量），并调用 d3.select("#heatmap-group").attr("transform", d3.event.transform) 应用变换。
5、为防止缩放后文字模糊，对所有文本元素添加 .style("font-size", (1 / d3.event.transform.k) + "em") 进行反向缩放补偿。
四、实现行列筛选联动交互（点击表头高亮整行/整列）
该方法通过为行标签（<text></text>）和列标签（<text></text>）分别注册点击事件，触发热力矩阵中对应行列单元的视觉强化，适合用于探索性数据分析。
1、为每一行的 Y 轴标签附加唯一 data-row-index 属性，列标签同理附加 data-col-index。
2、对所有行标签绑定 .on("click", function(event, d) { const rowIndex = d3.select(this).attr("data-row-index"); highlightRow(rowIndex); })。
3、定义 highlightRow(rowIndex) 函数：遍历所有 rect，若其 data.rowIndex === rowIndex，则设 stroke = "steelblue" 且 stroke-width = "2"；其余恢复默认边框。
4、对列标签执行类似逻辑，但调用 highlightColumn(colIndex)，匹配条件为 data.colIndex。
5、添加互斥控制：当某行被高亮时，清除当前所有列高亮；反之亦然，确保视觉焦点唯一，可通过维护全局变量 currentHighlightedRow / currentHighlightedCol 实现状态追踪。
五、嵌入动态过滤滑块并实时重绘热力图
该方法引入 HTML <input type="range"> 控件，将用户拖动值映射为数据阈值，仅渲染高于该阈值的单元格，实现“聚焦高值区域”的交互意图。
1、在页面中插入滑块：<input type="range" id="threshold-slider" min="0" max="100" value="30">，并添加对应显示数值的 <span id="threshold-value">30</span>。
2、监听滑块 input 事件，读取当前值并更新 span 显示，同时触发 renderHeatmap(filteredData)。
3、在 renderHeatmap() 中，先调用 .selectAll("rect").remove() 清除旧单元格。
4、对原始数据执行过滤：const filteredData = rawData.filter(d => d.value >= thresholdValue)，再执行常规矩形渲染流程。
5、为增强反馈，对被过滤掉的单元格位置保留半透明灰色占位矩形，设置 fill-opacity="0.1" 且不绑定任何事件，以区分有效数据与空白区域。
