D3 ZOOM
d3의 zoom api에 대해서 알아봅시다.
d3 공식문서의 번역 수준입니다.
패닝(Panning) 및 확대/축소(Zooming)는 사용자가 보는 영역을 제한하여, 관심 영역에 집중할 수있게 해주는 보편적인 상호작용(interaction) 기술입니다. 클릭하여 드래그하여 이동하거나 마우스 휠을 스핀하여 줌하거나 터치를 사용하십시오. 이동 및 확대 / 축소는 웹 기반 매핑에서 널리 사용되지만 시계열(time-series) 및 산점도(scatterplots)와 같은 시각화와 함께 사용할 수도 있습니다.
Zoom 동작은 d3-scale 및 d3-axis 에서도 작동하도록 설계되었습니다. transform.rescaleX 및 transform.rescaleY를 참조하십시오. zoom.scaleExtent를 사용하여 확대 / 축소를 제한하고 zoom.translateExtent를 사용하여 이동을 제한 할 수도 있습니다.
Zoom 비헤이비어는 드래그를 위한 d3-drag 및 포커스 + 컨텍스트의 d3-brush와 같은 다른 비헤이비어와 결합 할 수 있습니다.
Zoom 동작은 zoom.transform을 사용하여 프로그래밍 방식으로 제어 할 수 있으므로 디스플레이를 구동하는 사용자 인터페이스 컨트롤을 구현하거나 데이터를 통해 애니메이션 둘러보기를 수행 할 수 있습니다.
API Reference
이 표는 Zooming 비헤이비어가 기본 이벤트를 해석하는 방법을 설명합니다.
| Event | Listening Element | Zoom Event | Default Prevented? |
|---|---|---|---|
| mousedown⁵ | selection | start | no¹ |
| mousemove² | window¹ | zoom | yes |
| mouseup² | window¹ | end | yes |
| dragstart² | window | - | yes |
| selectstart² | window | - | yes |
| click³ | window | - | yes |
| dblclick | selection | multiple⁶ | yes |
| wheel⁸ | selection | zoom⁷ | yes |
| touchstart | selection | multiple⁶ | no⁴ |
| touchmove | selection | zoom | yes |
| touchend | selection | end | no⁴ |
| touchcancel | selection | end | no⁴ |
이벤트가 소비되면 전파가 즉시 중지됩니다.
- iframe 외부에서 이벤트를 캡처하는 데 필요합니다. d3 드래그 # 9를 참조하십시오.
- 활성 마우스 기반 제스처 동안에 만 적용됩니다. d3 드래그 # 9를 참조하십시오.
- 마우스 기반 동작 후에 만 적용됩니다. zoom.clickDistance를 참조하십시오.
- 터치 입력에서 클릭 에뮬레이션을 허용해야합니다. d3 드래그 # 9를 참조하십시오.
- 터치 제스처 종료 후 500ms 이내에 무시됩니다. 클릭 에뮬레이션을 가정합니다.
- 두 번 클릭하고 두 번 살짝 두드리면 시작, 확대 / 축소 및 종료 이벤트를 발생시키는 전환이 시작됩니다.
- 첫 번째 휠 이벤트는 시작 이벤트를 내 보냅니다. 150ms 동안 휠 이벤트가 수신되지 않으면 종료 이벤트가 발생합니다.
- 해당 범위의 한계에 이미 해당되면 무시됩니다.
d3.zoom()
새로운 zoom 비헤이비어를 만듭니다. 반환 된 zoom(behavior)은 객체이자 함수이며 일반적으로 selection.call을 통해 선택한 요소에 적용됩니다.
zoom(selection)
이 zoom 동작을 지정된 선택 영역에 적용하고, 필요한 이벤트 리스너를 바인딩하여 panning 및 zooming를 허용하고, 아직 정의되지 않은 경우 선택한 각 요소의 변형 변형을 identity 변환으로 초기화합니다. 이 함수는 일반적으로 직접 호출되지 않으며 대신 selection.call을 통해 호출됩니다. 예를 들어 zoom 비헤이비어를 인스턴스화하여 선택 영역에 적용하려면 다음을 수행하십시오.1
selection.call(d3.zoom().on("zoom", zoomed));
내부적으로 zoom에서는 selection.on을 사용하여 zoom을 위해 필요한 이벤트 리스너를 바인딩합니다. 리스너는 .zoom이라는 이름을 사용하므로 다음과 같이 줌 동작을 바인딩 해제 할 수 있습니다.1
selection.on(".zoom", null);
휠 스크롤 방식의 zoom 기능을 사용하지 않으려면 zoom 비헤이비어를 선택 항목에 적용한 후 zoom 비헤이비어의 휠 이벤트 리스너를 제거 할 수 있습니다.1
2
3selection
.call(zoom)
.on("wheel.zoom", null);
zoom.filter를 사용하여 어떤 이벤트가 줌 제스처를 시작할 수 있는지 더 잘 제어 할 수 있습니다.
zoom 동작을 적용하면 -webkit-tap-highlight-color 스타일을 투명하게 설정하고 iOS에서 탭 강조 표시를 비활성화합니다. 다른 탭 강조 색상을 원하면 끌기 동작을 적용한 후에이 스타일을 제거하거나 다시 적용하십시오.
zoom.transform(selection, transform)
선택 항목이 selection인 경우 선택한 요소의 현재 줌 변형을 지정된 변형으로 설정하고 즉각 시작, 확대 및 종료 이벤트를 표시합니다. 선택 항목이 transition인 경우 d3.interpolateZoom을 사용하여 지정된 변형에 대한 “zoom”트위닝을 정의하고, 전환(transition)이 시작될 때 시작 이벤트를 내보내고(emit) 전환의 각 눈금에 대해 zoom 이벤트를 수행 한 다음 전환이 끝날 때(또는 차단되었을때) 이벤트를 종료합니다.
transform은 zoom transform이나 zoom transform을 반환하는 함수로 지정 될 수 있습니다. 함수인 경우 선택한 요소 각각에서 호출되고 현재 데이터(d) 및 인덱스(i)가 전달되며, 이 컨텍스트는 현재 DOM 요소로 전달됩니다.
이 함수는 대개 직접 호출되지 않으며 대신 selection.call 또는 transition.call을 통해 호출됩니다. 예를 들어, zoom transform을 독자적(identity) transform으로 바로 재설정하려면 :1
selection.call(zoom.transform, d3.zoomIdentity);
750 밀리 초 동안 줌 변환을 identity transform으로 부드럽게 변경하려면 :1
selection.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
위 방법을 사용하려면 새 zoom transform을 완전히 지정해야하며, 비율 범위(scale extent)와 변환 범위(translate extent)의 정의를 필요로 하지 않습니다. 기존 변환에서 새 변환을 파생시키기위해 비율을 적용하고 범위를 변환하려면 편리한 메소드인 zoom.translateBy, zoom.scaleBy 및 zoom.scaleTo를 참조하십시오.
zoom.translateBy(selection, x, y)
선택 항목이 selection인 경우 선택한 요소의 현재 줌 변형을 x및 y로 변환하여 새 tx1 = tx0 + kx 및 ty1 = ty0 + ky 가 되도록합니다.
선택 항목이 transition인 경우 현재 변환을 변환하는 zoom트윈을 정의합니다. 이 메소드는 zoom.transform의 메소드입니다. x 및 y 변환 양은 숫자 또는 숫자를 반환하는 함수로 지정 될 수 있습니다. 함수 인 경우 선택한 요소 각각에 대해 호출되고 현재 데이터(d) 및 색인(i)가 전달되며이 컨텍스트는 현재 DOM 요소로 전달됩니다.
zoom.translateTo(selection, x, y)
선택 영역이 selection이면 선택한 요소의 현재 줌 변형을 변환하여 지정된 위치 ⟨x, y⟩가 뷰포트 범위의 가운데에 나타납니다. 새로운 tx = cx - kx 및 ty = cy - ky , 여기서 ⟨cx, cy⟩는 중심입니선택 항목이 transition인 경우 현재 변환을 변환하는 zoom트윈을 정의합니다. 이 메소드는 zoom.transform의 메소드입니다. x 및 y 변환 양은 숫자 또는 숫자를 반환하는 함수로 지정 될 수 있습니다. 함수 인 경우 선택한 요소 각각에 대해 호출되고 현재 데이터(d) 및 색인(i)가 전달되며이 컨텍스트는 현재 DOM 요소로 전달됩니다.
