SVG气泡图半径需按√数据值映射以保证面积比例，公式为rᵢ = r_min + (r_max − r_min) × √[(dᵢ − minD)/(maxD − minD)]，并加安全约束及零负值处理。
SVG气泡图的半径不能直接用原始数据值，否则小数值气泡几乎不可见、大数值气泡溢出容器。关键在于将数据映射到一个合理的像素半径区间（如 6–60px），同时保持视觉上的面积比例关系——因为人眼感知的是气泡面积，而非半径。
为什么用面积比例，而不是半径比例？
若直接线性缩放半径，数据为 1、4、9 的三个点，半径设为 1px、4px、9px，其实际面积比是 1:16:81，严重夸大了差异。正确做法是：让面积 ∝ 数据值，即 半径 ∝ √数据值。这样数据 1、4、9 对应半径 ≈ 1、2、3，面积比才真正是 1:4:9。
自适应半径计算四步法
假设数据数组为 [d₁, d₂, ..., dₙ]，SVG可视区域宽高已知（如 width=800, height=500），需动态适配：
-
归一化数据：求最小值
minD和最大值maxD；若所有值相等，统一设半径为中间值（如 30） -
计算面积比例因子：令目标最小面积
A_min = π × r_min²（r_min 建议 6–10），最大面积A_max = π × r_max²（r_max 建议 40–70，留白防重叠） -
映射每个数据到面积，再开方得半径：
rᵢ = r_min + (r_max − r_min) × √[(dᵢ − minD) / (maxD − minD)]
（该公式等价于先线性映射面积，再开方，更稳定且避免负值） -
加安全约束：对每个
rᵢ执行rᵢ = Math.max(r_min, Math.min(r_max, rᵢ))
响应式 SVG 容器中的动态调整
当窗口缩放时，仅重绘气泡不足够——需同步缩放半径基准（r_min/r_max）或重算映射范围。推荐做法：
- 使用 viewBox（如 viewBox="0 0 800 500"）+ 百分比宽高，让 SVG 自动缩放
- 半径仍用绝对像素值（如 r="24"），但通过 CSS svg { max-width: 100%; height: auto; } 控制整体尺寸
- 此时无需重算半径，视觉比例自动保持；若需更精细控制（如移动端缩小气泡密度），可在 resize 时按比例微调 r_min/r_max（例如乘以 Math.min(1, innerWidth / 800)）
避免常见陷阱
零值或负值：SVG 半径不能 ≤ 0。预处理时，若数据含零/负，可平移整体（dᵢ' = dᵢ − minD + ε，ε 取 0.1 或最小正数）
极值离群：单个极大值会压缩其余气泡。可改用中位数绝对偏差（MAD）截断，或对数据取对数后再映射（log(dᵢ + 1)）
文字标签适配：气泡内文字字号建议与半径成正比（如 font-size = rᵢ × 0.3），并限制最小字号（≥12px）保证可读
立即学习“前端免费学习笔记（深入）”；
