D3 드래그 이벤트는 얼마나 자주 트리거됩니까?

Question

저는 드래그에 관한 매우 일반적인 낮은 수준의 질문이 있습니다. D3.js v4에서 드래그 이벤트가 트리거되는시기를 정확하게 파악하는 방법에 특히 관심이 있습니다. 예를 들어 드래그 된 객체를 매우 느리게 이동하면 드래그 이벤트가 움직이는 각 픽셀을 실행합니다. 그러나 상당히 빠르게 움직이면 드래그 이벤트는 이동 한 픽셀의 양과 일대일 상관 관계로 트리거되지 않습니다.

현재이 문제는 주로 Chrome Dev 성능 탭에서 조사 중입니다. 나는 이것이 (희망을 갖고) 나에게 약간의 통찰력을 줄 것이라고 생각한다. 또한 이벤트가 호출되는 시간을 제한 할 수있는 기능의 디 바운싱이 있음을 알고 있습니다. 그러나, 나는 D3가 이것을 가지고 있다는 것을 알지 못한다. 드래그 호출이 줄어든 이유는 아마도 Chrome의 내부 기능과 관련이 있으며 마우스를 움직이는 속도에 따라 드래그를 호출하는 알고리즘을 사용하는 것입니다. 이것은 가장 가능성있는 대답 인 것처럼 보이지만,이 행동이 얼마나 정확하게 결정되는지에 대해 누구보다 나에게 통찰력을 줄 수 있다면, 나는 크게 감사 할 것입니다.

마지막으로 한 가지 : 마우스 커서를 너무 빨리 움직이면 드래그하는 객체가 '나가기'때문에 드래그 이벤트가 호출되어서는 안된다는 사실을 알고 있습니다. 그러나 내가 끌고있는 객체를 '놓아 두지'않을 때에도 마우스 커서를 얼마나 빨리 움직이는 지에 따라 드래그 할 호출 수가 줄어 듭니다.

p.s. 나는 D3을 사용하고 있지만이 문제는 일반적으로 D3에만 국한되지 않고 일반적으로 드래그하는 것과 관련이 있습니다 ...

Answer 1

D3와 관련이없는 문제는 일반적인 JavaScript 행동이나 더 나은 것은 브라우저 관련 행동입니다. 현재보고있는 것은 mousemove의 기능입니다.

당신이 D3 API 보면, 당신은 "드래그"이벤트가 mousemove (나에 대한 touchmove 터치 장치)를 사용하는 것을 볼 수 있습니다 :

드래그 - (MouseMove 이벤트 나하는 TouchMove에) 활성 포인터를 이동 한 후 .

이제 중요한 정보가 나타납니다. mousemove은 브라우저에서 생성됩니다. 그보다 더 중요한 것은 브라우저가 거리 또는 시간과 관련된 특정 속도로 이벤트를 생성 할 의무가 없다는 것입니다. 또한 다른 요소가 mousemove의 빈도에 영향을 미칠 수 있습니다. 예를 들어 사용중인 하드웨어가 이에 해당됩니다. 우리가 (단지 단순화를 위해) 가정하면

그래서, 브라우저가 mousemove 이벤트 100ms마다 생성하는, 당신은 행동에 대한 간단한 설명하면 설명이 있습니다

을 감안할 때 그 speed = distance/time, 당신이 빠르게 마우스를 이동하는 경우, A 지점에서 B 지점까지의 이벤트가 적어집니다 (즉, mousemove 이벤트에서 다음 이벤트까지의 거리가 더 큽니다). 마우스를 더 느리게 움직이면 A 지점에서 B 지점까지 더 많은 이벤트가 발생합니다 (즉, mousemove 이벤트에서 다음 이벤트까지의 거리가 더 작아집니다). 가상 시나리오에서 마우스를 1px/100ms 미만의 속도로 움직이면 픽셀 당 하나의 이벤트가 발생합니다.

마지막으로, 여기에 아주 간단한 데모가 있습니다. 클릭하고 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>