Zoomable

Zoomable은 줌/패닝 기능을 사용하는 차트를 위한 타입이다. Default나 RectLinear를 상속받아 사용할 수 있도록 Mixin 함수 형태로 사용한다.

현재 Brushable 활용하는 유형은 Line, Scatter가 있다.

API Reference

# zoomable.zoom([zoom]) <>

줌 기능 사용 여부와 그 타입 normal|brush 을 설정한다. zoom 값은 true|false 나 normal|brush 스트링을 입력 받는다. true인 경우 normal로 설정된다. normal 인 경우 마우스 드래깅을 이용한 줌 기능이 설정되고 brush의 경우, 브러쉬 영역을 활용한다. 실제적인 구현은 차트 유형에 따라 다르다.

# zoomable.on(type, listener) <>

줌 조작시 zoom 타입의 이벤트가 발생한다. type에 zoom 이벤트 타입을 설정하고, listener에 이벤트를 처리하는 콜백 함수를 입력한다. listener 함수에서는 d3.event 값을 통해 Zoom Event 설정 값을 확인할 수 있다.

scatter.on('zoom', function() { //scatter의 줌 기능이 작동할 때 해당 줌의 변환을 확인 
  console.log(d3.event.transform);
})