这个效果是怎么做出来的
气泡图的信息编码很简单：每个类别一个圆，半径映射数值大小，位置可以按类别排布也可以按两维指标散布。点击交互是三步联动：被点的气泡放大（scale 到约 1.7 倍封顶）并平移到画布中心；其余气泡按圆心距离做避让位移——离得近的推得远，远的少推，迭代两三轮后互不重叠；全程 transform 过渡 0.4 秒，弹簧缓动，像水面上一颗珠子被按下去、别的珠子被挤开。
技术上有一个关键：SVG 里圆的位移放在 g 元素的 transform 上，放大放在 circle 的 scale 上并用 transform-box: fill-box 把缩放中心钉在圆心，两层级联才不会互相干扰。避让计算每帧重排一次坐标数组，几个气泡毫无压力，几十个也就毫秒级。
怎么用这条提示词
适合类别多且数值差异大的构成分析：内容类型占比、渠道流量、库存分布。发给 AI 时给出名称、数值和可选的第二维数据，它会生成半径映射与避让逻辑。小气泡装不下文字时，叮嘱 AI「半径小于 14px 的气泡把标签外置到圆下方」。
想效果更好？试试这些
半径别用数值直接映射，用面积映射（半径正比于数值的平方根），大小差异的视觉感受才和数据成比例。点击已放大的气泡要能还原，双状态闭环。气泡颜色统一色相不同明度，中心那个加一圈描边强调。被推开的气泡加轻微的透明度衰减，越远越淡，空间感立刻出来。最后给整张图加 prefers-reduced-motion 降级：直接跳到终态，不做推挤动画。