feat : 모바일 캔들차트 줌 이벤트 #59

[baldwinIV]

개요

• 모바일 캔들차트에서 터치로 줌할 수 있도록 수정함

작업사항

• drag 이벤트에 바인딩
• drag 이벤트의 sourceEvent 속성 활용하여, 현재 입력방식이 터치인지/마우스인지 판별하여 줌 여부 결정, 터치였다면 두개손가락으로 터치중인지, 아닌지 결정하여 모바일 패닝인지 모바일 줌인지 결정한다.
• 지역변수로 멀티터치하는 두 점사이의 유클리드 거리를 측정하여 전 상태보다 두 점사이의 거리가 줄었는지, 늘었는지를 기준으로 줌인/아웃을 판단한다.

생각해볼점

• 더 좋은 방법이 있을지? 지역변수 두고 돌리고 있는데, 클로저라던지,, 뭐 그런방법 사용하면 더 꺨꼼해보일거 같다..
• 클로저 사용해보려고했는데, 한개의 콜백이 아니라 세 개의 콜백함수가 하나의 변수를 공유해야해서.. 난감했다.

이미지

https://user-images.githubusercontent.com/60903175/206908537-d89cf4b8-80af-4eb3-a96a-c1f079ba9c63.MOV

[baldwinIV]

확인했습니다. 드래그이벤트 내에서도 세부적으로 sourceEvent를 활용할 수 있는지 처음알았네요 고생 많으셨습니다!

코드 졸라 뜯어봤습니다.. ㅋㅋ 아무래도 d3 drag라는 거 자체가 자바스크립트 기본 이벤트에 본인들 코드를 augmetation 한거 같아서요. 감사하빈다.