D3拖动事件多久触发一次? [英] How frequently is D3 drag event triggered?

问题描述

关于拖曳，我有一个非常笼统的低级问题.我对研究什么确切确定何时在D3.js v4中触发拖动事件特别感兴趣.例如，如果我非常缓慢地移动拖动的对象，则拖动事件将触发我移动的每个像素.但是，如果我移动得很快，则拖动事件不会与我移动的像素数量一一对应地触发.

I have a very general low level question about dragging. I am specifically interested in learning what exactly determines when a drag event is triggered in D3.js v4. For example, if I move a dragged object very slowly, a drag event will fire each pixel I move. However, if I move fairly fast, the drag event is not triggered in a one-to-one correlation with the amount of pixels I have moved.

我目前正在研究此问题，主要是通过"Chrome开发人员性能"标签进行的；我认为这将(希望)给我一些见识.我也知道，有一些反跳功能可以限制事件被调用的次数.但是，我不知道或看不到D3具有此功能.我认为，减少拖动的原因与Chrome中的内部功能有关，也许它只是根据鼠标移动的速度使用某种算法来调用拖动.这似乎是最有可能的答案，但是如果有人能给我一些有关这种行为如何确定的见解，我将不胜感激.

I am currently researching this issue, primarily with the Chrome Dev Performance tab; I figure this will (hopefully) give me some insight. I am also aware that there are debouncing functions which can limit the amount of times an event is called; however, I don't know or see that D3 has this. I am thinking that the reason for the decreased calls to drag has something to do with something perhaps internal in Chrome and that perhaps it just uses some sort of algorithm to call drag based on how fast the mouse moves. This seems to be the most likely answer, but if anyone can give me some insight as to how exactly this behavior is determined, I would be greatly appreciative.

最后一件事:我还知道，有时当您如此快速地移动鼠标光标以至于它退出"了要拖动的对象时，就不应调用drag事件.但是，即使我没有离开"要拖动的对象，根据我移动鼠标光标的速度，仍然有更少的拖动请求.

One last thing: I am also aware that sometimes when you move the mouse cursor so quickly that it 'exits' the object you are dragging, then the drag event should not be called. However, even when I don't 'leave' the object I am dragging, there are still less calls to drag based on how quickly I move the mouse cursor.

p.s.当我使用D3时，此问题可能与拖动有关，而与D3无关...

p.s. while I am using D3, this issue may very well just have to do with dragging in general and not be anything specific to D3...

推荐答案

您看到的问题与D3无关，这是一般的JavaScript行为，或者更好的是，与浏览器相关的行为:您正在做什么可见是mousemove的功能.

The issue you're seeing has little to do with D3, it's a general JavaScript behaviour or, better yet, a browser-related behaviour: what you're seeing is a feature of mousemove.

如果您查看 D3 API ，您会看到拖动"事件使用mousemove(对于触摸设备，则为touchmove):

If you look at the D3 API, you'll see that the "drag" event uses mousemove (or touchmove for touch devices):

拖动-在活动指针移动(鼠标移动或触摸移动)之后.

drag - after an active pointer moves (on mousemove or touchmove).

现在出现了重要信息:mousemove由浏览器生成.更为重要的是，浏览器没有义务以任何特定的速率来生成事件，无论它与距离或时间有关.另外，例如您所使用的硬件，其他因素也可能影响mousemove的频率.

Now comes the important information: mousemove is generated by the browser. More important than that, the browser is not obligated to generate the event by any specific rate, be it related to distance or time. Also, other factors may influence the frequency of mousemove, as the hardware you're using for instance.

因此，如果我们假设(仅为简化起见)浏览器每100ms生成一个mousemove事件，则对所描述的行为有一个简单的解释:

So, if we assume (just for simplification) that the browser generates a mousemove event every 100ms, you have a simple explanation for the behaviour you described:

鉴于speed = distance / time，如果您更快地移动鼠标，则从点A到B的事件将更少(即，从mousemove事件到下一个事件的距离将更大).如果将鼠标移慢，则从点A到B会有更多事件(即，从mousemove事件到下一个事件的距离会更短).如果您以小于1px/100ms的速度移动鼠标(在我们的假设方案中)，则每个像素有1个事件.

Given that speed = distance / time, if you move your mouse faster, you'll have less events from point A to B (that is, the distance from a mousemove event to the next will be bigger). If you move your mouse slower, you'll have more events from point A to B (that is, the distance from a mousemove event to the next will be smaller). If you move your mouse in a speed less than 1px/100ms (in our hypothetical scenario), you'll have 1 event per pixel.

最后，这是一个显示它的非常简单的演示.单击并拖动SVG中的任意位置:

Finally, here is a very simple demo showing it. Click and drag anywhere in the SVG:

var count = 0;
d3.select("svg").call(d3.drag().on("start", function() {
  console.log("drag started")
}).on("drag", function() {
  ++count; 
  console.log("drag event " + count)
}).on("end", function() {
  count = 0;
  console.log("drag ended")
}))

.as-console-wrapper { max-height: 20% !important;}
svg {
  border: 1px solid black;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

这篇关于D3拖动事件多久触发一次?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！