D3拖动事件行为:DragEvent.x和DragEvent.y值源 [英] D3 drag event behaviour: DragEvent.x and DragEvent.y values source

问题描述

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

I don't understand the behaviour of the D3 DragEvent object in Mike Bostock’s examples for D3.

这是我不明白的两个例子: 拖动圆环I 拖动+缩放

Those are the two examples I don't understand: Circle Dragging I Drag + Zoom

这是我不明白的代码:

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

function dragged(d) { d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); }

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

In this example, d.x and d.y are part of a data object that contains the last centre of the circle.

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

What I expect to happen with this code, is that the attributes cx and cy of the circle change to the current value of d3.event.x and d3.event.y

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

In my view, that should be the coordinates where the mouse is when the user start dragging. If the user is not starting to drag exactly in the centre of the circle, the behaviour I expect is the circle to jump to the place where the user start dragging and, then, a normal dragging behaviour.

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

My problem is that the initial jump doesn't happen and I don't know why.

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

I checked the values of d3.event.x and d3.event.y when the code is running and they are exactly the same values of d.x and d.y, never mind where the user click in the circle. I don't understand why that is the case.

最后，我将对象中的名称(并且仅更改了名称)(并且在代码中需要的时候)从d.x和d.y更改为d.m和d.n，并且代码开始执行我期望的操作.

Finally, I changed the name (and only the name) in the object (and whenever was necessary in the code), from d.x and d.y to d.m and d.n and the code started to do what I was expecting.

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

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期望一个具有具体属性的数据对象，但这对我来说很奇怪，我找不到它的记录.

So, the code works differently when the data object has the properties d.x and d.y that when the data object has the properties d.m and d.n. It seems like the object DragEvent is expecting a data object with concrete proprieties but that sounds weird to me and I can't find it documented.

如果没有人知道答案，我本来希望避免检查D3源代码.

I was expecting to avoid checking D3 source code if somebody know the answer already.

推荐答案

我的行为虽然怪异，却是预期的行为.

What I though a weird behaviour is the intended behaviour.

所有DragEvent对象都有一个主题".主题不是产生拖动事件的SVG形状，而是(如果存在)与该SVG相关联的基准.

All DragEvent objects have a 'subject'. The subject is not the SVG shape that is producing the dragging event, but, if it exist, the datum associated to that SVG.

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

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

So, yes, if the datum object have the the properties x and y, the value would be assigned to the properties dx and dy of the DragEvent object.

正如我们在d3源代码中所见，在

As we can see in the d3 source, in the drag.js file:

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

这篇关于D3拖动事件行为:DragEvent.x和DragEvent.y值源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！