D3.js zoom in out 버튼 구현

최근 D3.js로 확대축소가 가능한 그래프를 만들일이 있었다.

최종적으로는 마우스 인터페이스로 확대되는것은 막아놓고,

오직 버튼으로만 컨트롤 하는 인터페이스 구현이었는데, 구현과정에서 좀 애를 먹었다.

먼저 마우스휠로 줌 되는것을 막아놓아야 했는데,

.on("wheel.zoom", null) 함수를 써서 휠 인터페이스를 막아놓음으로 간단히 구현할 수 있었다.

그리고 zoom in out 버튼 인터페이스는 아래의 질문의 답변을 참고하여 구현하였다.

https://stackoverflow.com/questions/40246196/d3-v4-zoom-with-buttons-in-conflicts-with-zoom-behaviour

사실 이 과정에서 많은 시간이 걸렸는데,

나중에 살펴보니 내가 짠 svg 구조와 위에서 짠 svg 구조가 서로 다름을 알 수 있었다.

자세히 살펴보니 위 링크의 예제에서는 g로 그룹을 지어서

마우스 zoom 인터페이스로는 g의 객체들을 컨트롤 하게 하였고,

zoom in out버튼에 따라 반응하는 객체는 svg객체였다.

즉, 서로 따로 놀고 있다는 것인데, 이렇게 해야만 인터페이스가 제대로 작동함을 알 수 있었다.

왜냐하면 나같은 경우 svg의 하위 객체인 g에 translate를 하여 margin 값을 적용해 놓았는데,

g 객체에 zoom in out 버튼까지 맞물려 scaleBy 함수를 동작시키면

센터값이 변경되어 객체들이 이상한 곳으로 이동하여 zoom이 동작된다.

그렇기에 svg객체는 zoom in out 버튼에 반응하게 하고,

나머지 객체들은 g라는 그룹으로 묶어서 마우스 zoom 인터페이스에 반응하게 해야

서로 충들이 일어나지 않음을 알 수 있었다.