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

Question

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

这是我不理解的两个例子：圆圈拖动我拖动缩放

这是我不明白的代码：

函数拖动（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。事件x和d3。事件Y

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

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

我检查了d3的值。事件x和d3。事件当代码运行时，它们是完全相同的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时，代码的工作方式也不同。看起来对象DrageEvent期望一个具有具体属性的数据对象，但这听起来很奇怪，我找不到文档记录。

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

Answer 1

我认为奇怪的行为是故意的行为。

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

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

因此，是的，如果基准对象具有特性x和y，则该值将指定给DrageEvent对象的特性dx和dy。

正如我们在d3源代码中看到的，在拖动中。js文件：

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