可实现交互图表拖拽功能：一、D3.js绑定drag behavior；二、SVG原生事件结合getScreenCTM转换坐标；三、Canvas手动管理拾取与拖拽状态。
如果您希望在网页中实现交互图表的拖拽功能，通常需要借助前端图形库或原生 JavaScript 捕获鼠标/触摸事件并动态更新图表元素位置。以下是几种主流且可直接落地的实现方法：
一、使用 D3.js 绑定 drag behavior
D3.js 提供了内置的 drag 模块，可为 SVG 元素（如节点、路径、组）添加平滑拖拽行为，适用于力导向图、散点图节点等场景。
1、引入 D3.js 库，确保版本 >= v6（支持 d3.drag()）。
2、选择目标图表元素，例如一个 SVG 的 circle 节点。
3、创建 drag 行为实例：const dragHandler = d3.drag().on("start", started).on("drag", dragged).on("end", ended)。
4、将 drag 行为绑定到元素：d3.select("#myNode").call(dragHandler)。
5、在 dragged 回调中，通过 d3.event.x 和 d3.event.y 获取当前坐标，并更新元素的 cx/cy 或 transform 属性。
二、基于 SVG 原生事件 + getScreenCTM 实现精确拖拽
当图表使用缩放、平移或嵌套 g 变换时，需将屏幕坐标转换为 SVG 用户坐标，避免拖拽偏移失真。
1、监听元素的 mousedown/touchstart 事件，记录初始鼠标位置与元素当前 transform 矩阵。
2、在 mousemove/touchmove 中调用 element.getScreenCTM().inverse() 获取逆矩阵。
3、使用 matrix.transformPoint({x, y}) 将屏幕坐标转为 SVG 坐标。
4、计算位移差值，更新元素的 transform="translate(x,y)"。
5、mouseup/touchend 时清除事件监听器并保存最终位置。
三、Canvas 图表中手动管理拖拽状态
对于使用 Canvas 绘制的图表（如 ECharts 自定义系列、Fabric.js 或纯 Canvas），无法直接对图形对象绑定事件，需自行维护拾取逻辑和拖拽状态。
1、在 canvas 的 mousedown 事件中，遍历所有图表数据点，用距离公式判断是否点击到某节点（如 Math.hypot(x - node.x, y - node.y) ）。
2、若命中，设置 draggingTarget = node 并记录鼠标按下偏移量（offsetX = x - node.x，offsetY = y - node.y）。
3、mousemove 中根据当前坐标减去偏移量，重新赋值 node.x/node.y。
4、每次移动后调用 canvas.redraw() 重绘整个图表区域。
5、mouseup 时将 draggingTarget 置为 null。
四、使用 ECharts 的 graphic component + draggable 配置
ECharts 4.9+ 支持在 graphic 组件中启用拖拽，适用于自定义矢量图形（如矩形、圆形、路径），无需手写事件逻辑。
1、在 option.graphic 中添加一个 type 为 "circle" 的元素，并设置 draggable: true。
2、指定其 position 字段为数组形式，如 [100, 200]，表示初始坐标（像素值）。
3、监听 chart.on('graphicdrift') 事件，获取拖拽中的实时坐标：event.target.position。
4、在回调中可同步更新其他组件数据或触发 tooltip 显示。
5、注意：该方式仅对 graphic 组件生效，series 中的 data item 默认不支持 draggable。
