javascript - D3 拖动事件行为 : DragEvent. x 和 DragEvent.y 值来源

Question

我不理解 Mike Bostock 的 D3 示例中 D3 DragEvent 对象的行为。

这是我不明白的两个例子: Circle Dragging I Drag + Zoom

这是我不明白的代码:

function dragged(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，代码开始执行我所期望的。

function dragged(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 源代码。

Answer 1

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

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

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

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

正如我们在 d3 源代码中看到的那样，在 drag.js 中文件:

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