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

Question

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

这些是两个例子我不理解： Circle Dragging I Drag + Zoom

这是我不理解的代码：

功能拖动（d）{d3.select（这个）.attr（“cx”，dx = d3.event.x）.attr（“cy”，dy = 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（本）.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的值将被分配给dx和dy的DragEvent对象的属性。

正如我们在D3源看，在drag.js文件：

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