svg交互式图表核心在于dom可操作性与原生事件支持，需理清左上角原点、y轴向下增长的坐标系，通过viewbox定义逻辑坐标系，用分组管理元素，动态创建或/，结合事件委托实现高效交互。
SVG 实现交互式可视化图表，核心在于利用其 DOM 可操作性与原生事件支持。柱状图和折线图不是静态图片，而是可绑定点击、悬停、缩放的“活”元素——关键不在画得多漂亮，而在结构清晰、坐标算得准、交互响应稳。
坐标系统必须先理清
SVG 原点在左上角，y 轴向下增长，这和数学坐标系相反。绘图前要统一转换逻辑：
- 若数据最大值为 100，画布可用高度为 200px，则数值 80 对应的 y 坐标 = 顶部留白 + (100 − 80) / 100 × 200（即“倒置映射”）
- 推荐用
viewBox定义逻辑坐标系（如viewBox="0 0 500 300"），再配合 CSS 控制实际显示尺寸，实现真正响应式 - X 轴刻度建议用
<g></g>分组管理：每根柱子或每个数据点配一个<g></g>，含<rect></rect>或<circle></circle>+<text></text>标签，方便整体位移或事件委托
柱状图：用 + 动态属性生成
每个柱子本质是一个带位置和尺寸的矩形，但需注意 y 值是顶部起点，height 是向下延伸长度：
- 设数据为
[45, 72, 38, 91]，最大值 91，画布高度预留 40px 给文字和边距，则单柱高度 = (值 / 91) × 可用高度 - 用 JavaScript 动态创建：
const bar = document.createElementNS("http://www.w3.org/2000/svg", "rect")，再 setAttribute 设置 x、y、width、height 和 fill - 悬停变色只需监听 mouseover/mouseout：
bar.addEventListener("mouseover", () => bar.setAttribute("fill", "#e74c3c"))
折线图： 或 更灵活
<polyline></polyline> 适合离散点连线，<path></path> 更适合平滑曲线或复杂路径：
- 将数据点数组（如
[[10, 200], [50, 140], [90, 160], [130, 80]]）转为字符串："10,200 50,140 90,160 130,80"，赋给points属性 - 若需鼠标跟随提示，可在每个数据点位置加
<circle r="4" fill="#3498db"></circle>，并绑定 click 事件弹出对应数值 - 用
<path d="M10 200 L50 140 L90 160 L130 80"></path>效果等同 polyline，但 path 支持贝塞尔曲线（C 指令），适合趋势拟合
交互增强靠事件委托与状态管理
避免为上百个柱子逐个绑事件，改用父容器监听 + 坐标判断：
- 给整个
<svg></svg>添加addEventListener("click", handleChartClick) - 在 handler 中用
event.target判断是否为rect或circle，再读取其自定义属性（如data-index="2"或data-value="72"） - 高亮联动：点击某柱子时，不仅改变自身 fill，还可同步修改对应折线点的 stroke-width，或更新外部 info 区域文本
