[D3] Handling events 사용법

selection.on(typenames, listener, options)

선택된 각 요소에 대해 지정된 이벤트 유형에 대한 리스너를 추가하거나 제거합니다.

• typenames: 이벤트 유형 문자열로 click, mouseover, submit 등 DOM 이벤트 유형을 지정합니다. 공백으로 여러 이벤트를 지정할 수 있습니다. 그리고 (.)을 이용하여 eventListener에게 name을 설정할 수 있습니다.
• listener: 이벤트가 발생할 때 호출될 함수입니다. 현재 이벤트와 데이터를 인자로 받습니다.
• options: 선택사항으로 이벤트 리스너의 특징을 지정하는 객체입니다.

// 이벤트 리스너 추가
d3.selectAll("p").on("click", (event) => console.log(event));
// 이벤트 리스너 제거
d3.selectAll("p").on("click", null);
// 이벤트 리스너 이름 추가
d3.selectAll("p").on("click.foo", (event) => console.log(event));
// 이벤트 리스너 제거(특정 이름)
d3.selectAll("p").on("click.foo", null);
// 옵션 사용
d3.selectAll("p").on("click", (event) => console.log(event), { capture: true });

selection.dispatch(type, parameters)

지정된 유형의 커스텀 이벤트를 각 선택된 요소 순서대로 발생시킵니다.

• type: click과 같은 DOM 이벤트 유형입니다. 
• parameters: 추가 속성을 설정하는 객체입니다. bubbles와 같은 속성이 있습니다.

pointer(event, target)

주어진 이벤트의 좌표를 지정된 타겟 요소 기준으로 반환하는 함수입니다.

const [x, y] = d3.pointer(event);

타겟 요소를 지정할 경우 타겟 기준

const [x, y] = d3.pointer(event, document.getElementById('foo'));

 

pointers(event, target)

배열로 [[x0,y0]...]로 반환합니다.