本文介绍如何在 d3.js v7 中为 svg 热力图设置最小宽度并启用水平滚动条，确保小屏下字体可读性；核心是结合 css `min-width` 与 `viewbox` 动态缩放，并通过容器溢出控制实现平滑滚动体验。
在构建响应式 D3 可视化（如热力图）时，仅靠动态调整 SVG 的 viewBox（例如 attr("viewBox", "0 0 width height")）虽能实现缩放适配，但会导致小屏幕下文字严重压缩、难以辨识。用户真正需要的不是“无限制缩放”，而是在保障最小可读尺寸的前提下，允许内容横向溢出并提供滚动能力。这本质上是一个“CSS 布局 + SVG 渲染”协同问题，而非纯 D3 逻辑问题。
✅ 正确解法：CSS 控制容器行为，D3 负责内容绘制
关键在于分离职责：
- D3 负责：根据数据维度计算逻辑宽高、设置 viewBox 实现比例缩放；
- CSS 负责：约束容器最小尺寸、定义溢出行为，触发浏览器原生滚动条。
1. 设置 SVG 的最小宽度（核心修复）
在创建 SVG 元素时，直接通过 .style() 添加 min-width（注意：不是 minWidth 或其他驼峰写法）：
const svg = d3.select("#heatmap")
.append("svg")
.attr("id", "hm_svg")
.style("min-width", "700px") // ← 关键：强制 SVG 至少 700px 宽
.attr("viewBox", `0 0 ${i_width + margin.right} ${i_height + margin.top + margin.bottom}`);此行代码使 SVG 元素自身具备最小宽度约束。当父容器（#heatmap）宽度小于 700px 时，SVG 不会继续压缩，而是超出容器边界——此时需配合父容器的 overflow-x: auto 才能显示滚动条。
2. 配置父容器以启用滚动
仅设置 SVG 的 min-width 不够，必须让其父级
允许横向滚动。在 HTML
