D3.js drag 사용법 - d3.drag()

예제 프로그램

코드 실행

사용법

D3의 drag는 터치 이벤트를 지원한다.

d3.selectAll("div")
  .call(
      d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended)
  );


// 드래그 시작 호출되는 함수
function dragstarted(event) {
  // 처리 내용
}

// 드래그하는 동안 호출되는 함수
function dragged(event) {
  // 처리 내용
}

// 드래그 종료시 호출되는 함수
function dragended(event) {
  // 처리 내용
}

코드 실행

"div" 부분에 드래그 이벤트를 설정하려는 요소를 지정한다. 내부적으로는 on(...) 메소드에 의해 drag를 이벤트로서 등록하고 있다.

drag 이벤트를 해제하고 싶다면 아래와 같다 해제할 수 있다.

d3.selectAll("div")
  .on(".drag", null);

이벤트 변수

이벤트가 시작되면 다음 이벤트 변수가 event에 등록된다.

dragstarted 등의 함수내에서 event.target을 하면 참조할 수 있다.

다른 이벤트와의 대응

아래가 다른 이벤트의 대응표이다. start, drag, end의 3개에 이벤트를 축약하였다.

참조 사이트 ( d3-drag|GitHub )

요약

터치 이벤트에도 자동으로 대응하고 있어 멀티 디바이스에 대응할 수 있습니다. D3의 zoom 이벤트도 여기에 정리하고 있으므로 참조하십시오.