D3 拖动事件行为：DragEvent.x 和 DragEvent.y 值源

我不明白 Mike Bostock 的 D3 示例中 D3 DragEvent 对象的行为。

这是我不明白的两个例子：圆圈拖动 I https://bl.ocks.org/mbostock/22994cc97fefaeede0d861e6815a847e 拖动+缩放 https://bl.ocks.org/mbostock/6123708

这是我不明白的代码：

函数拖拽(d) { d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); }

在此示例中，d.x 和 d.y 是包含最后一个圆心的数据对象的一部分。

我期望这段代码发生的情况是，圆的属性 cx 和 cy 更改为 d3.event.x 和 d3.event.y 的当前值

在我看来，这应该是用户开始拖动时鼠标所在的坐标。如果用户没有开始精确地在圆的中心拖动，我期望的行为是圆跳到用户开始拖动的位置，然后是正常的拖动行为。

我的问题是初始跳跃没有发生，我不知道为什么。

我在代码运行时检查了 d3.event.x 和 d3.event.y 的值，它们与 d.x 和 d.y 的值完全相同，不管用户在圆圈中单击的位置。我不明白为什么会这样。

最后，我更改了对象中的名称（并且仅更改了名称）（以及代码中必要的任何时候），从 d.x 和 d.y 更改为 d.m 和 d.n，代码开始执行我所期望的操作。

函数拖拽(d) { d3.select(this).attr("cx", d.m = d3.event.x).attr("cy", d.n = d3.event.y); }

因此，当数据对象具有属性 d.x 和 d.y 时，代码的工作方式与数据对象具有属性 d.m 和 d.n 时的工作方式不同。 似乎对象 DragEvent 需要一个具有具体属性的数据对象，但这对我来说听起来很奇怪，而且我找不到它的记录。

如果有人已经知道答案，我希望避免检查 D3 源代码。

我认为奇怪的行为是预期的行为。

所有 DragEvent 对象都有一个“主题”。主题不是产生拖动事件的 SVG 形状，而是与该 SVG 关联的数据（如果存在）。

更多信息请参见：https://github.com/d3/d3-drag#drag_subject https://github.com/d3/d3-drag#drag_subject

因此，是的，如果基准对象具有属性 x 和 y，则该值将分配给 DragEvent 对象的属性 dx 和 dy。

正如我们在 d3 源代码中看到的，drag.js https://github.com/d3/d3-drag/blob/bb0af439b186b90e51c18057e2f616e02144b56a/src/drag.js#L110-L111 file:

  dx = s.x - p[0] || 0;
  dy = s.y - p[1] || 0;