D3 끌기 이벤트 비헤이비어 : DragEvent.x 및 DragEvent.y 값 소스

Question

D3에 대한 Mike Bostock의 예제에서 D3 DragEvent 객체의 동작을 이해할 수 없습니다.

그

내가 이해하지 못하는 두 가지 예입니다

기능 (D) 드래그 {d3.select (이 내가 이해하지 못하는 코드가 Circle Dragging I Drag + Zoom

this) .attr ("cx", dx = d3.event.x) .attr ("cy", dy = d3.event.y); }

이 예제에서 d.x와 d.y는 원의 마지막 중심을 포함하는 데이터 객체의 일부입니다.

는 내가이 코드에서 발생할 것으로 예상된다 나의 관점에서 d3.event.x 및 d3.event.y

의 현재 값에 원 변화의 속성의 CX 및 CY,해야 사용자가 끌기 시작할 때 마우스가있는 좌표입니다. 사용자가 원의 가운데에서 정확히 드래그를 시작하지 않으면 사용자가 드래그를 시작한 장소로 점프하고 그 다음 드래그하는 일반적인 동작이 예상됩니다.

내 문제는 초기 점프가 발생하지 않으며 그 이유를 모른다는 것입니다.

코드가 실행 중일 때 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에 연결된 데이텀입니다 (존재하는 경우). 데이텀 객체가 속성 x와 y가있는 경우 https://github.com/d3/d3-drag#drag_subject

그래서, 그래, 값이있는 DragEvent 객체의 DX와 DY 속성에 할당 할 것입니다 : 가능

더 많은 정보를 제공합니다.

우리가 drag.js 파일에서 D3 소스에서 볼 수 있듯이 :

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