D3拖拽示例中，如何保留鼠标与圆心的相对偏移量？

好问题！这其实是D3拖拽行为内置的贴心机制在起作用——它会自动计算并保留拖拽起始时鼠标相对于圆心的偏移量，让圆形始终跟着鼠标的相对位置移动，而不是直接吸附到鼠标坐标上。

核心原因：拖拽行为的偏移量计算 #

当你点击圆形边缘启动拖拽时，D3的d3.drag()行为会在拖拽开始阶段自动完成两件关键事：

1. 识别拖拽的「主体」：默认是被拖拽元素绑定的数据（比如你的圆形的cx/cy值对应的d.x/d.y）。
2. 计算初始偏移：用当前鼠标的绝对位置，减去主体的当前位置（圆心坐标），得到鼠标相对于圆心的偏移量（dx = 鼠标X - 圆心X，dy = 鼠标Y - 圆心Y）。

在后续的拖拽过程中，d3.event.x和d3.event.y并不是原始的鼠标绝对坐标——而是鼠标绝对坐标减去初始偏移量后的结果。也就是说，D3已经帮你修正了坐标，直接用这个值设置圆心位置，就能让圆形保持和鼠标的初始相对位置。

代码中的体现（以常见的拖拽示例为例） #

看这个典型的拖拽圆形代码：

// 创建圆形并绑定拖拽行为
const circles = svg.selectAll("circle")
  .data(circleData)
  .enter()
  .append("circle")
  .attr("r", 20)
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)
  .call(d3.drag()
    .on("drag", dragged));

// 拖拽过程的处理函数
function dragged(d) {
  // 直接用d3.event.x/d3.event.y设置圆心
  d3.select(this)
    .attr("cx", d.x = d3.event.x)
    .attr("cy", d.y = d3.event.y);
}

这里的关键就是d3.event.x和d3.event.y——它们已经是修正过偏移的坐标。如果不用这个，而是直接取原始鼠标事件的坐标（比如d3.event.sourceEvent.clientX），圆心就会立刻跳到鼠标位置，出现你担心的「吸附」现象。

自定义偏移的情况（可选） #

如果你需要更灵活的控制，可以通过subject访问器自定义拖拽主体，比如：

.call(d3.drag()
  .subject(d => ({x: d.x, y: d.y})) // 显式指定主体的位置属性
  .on("drag", dragged))

这和默认行为一致，D3依然会基于你指定的主体位置计算初始偏移，确保拖拽时的相对位置不变。

简单来说，D3拖拽行为帮你封装了偏移量的计算和应用，不用手动去记录鼠标和圆心的差值，直接用d3.event.x/d3.event.y就能实现自然的拖拽体验。

内容的提问来源于stack exchange，提问作者meetamit