본문 바로가기

transform2

줌 및 이동 초기화 왜 안되지? zoom과 pan을 초기화 시키는 기능을 개발하는데 초기화 이후에 전에 저장된 값으로 돌아가는 증상이 발생. 어디가 문제일까? 초기화 이후에 zoom과 pan이 발생하면 d3.event.transform의 값을 이용해서 동작하는데 이 때의 값이 초기화 안된 상태로 계속 사용되어 진다. 어떻게 초기화 하지? 무식하게 d3.event.transform에 넣을 순 없고... 해보면 알겠지만 d3와 무관한 액션에 관해서는 d3.event가 발생하지 않는다. 방법을 찾다보니 역시나 레퍼런스들이 존재한다. selection.call(zoom.transform, d3.zoomIdentity) 여기서 중요한 점은 위의 selection은 최초 zoom을 연결한 selection이어야 한다. 엉뚱한 sele.. 2019. 5. 7.
좌표 시스템 좌표계 d3에서 svg 엘레먼트들을 드래깅해서 위치 값을 변경해주는 경우가 생긴다. 이 때 2가지의 방법이 있다. 각 엘레먼트들을 독립적으로 좌표값을 변경시키는 방법 각 엘레먼트들을 group으로 묶고 group을 transform의 translate를 이용해서 변경시키는 방법 나는 2번을 이용해서 구현했는데, 이렇게 되면 메인 svg에 pan & zoom 기능이 있을 경우에 좌표 시스템이 변환이 된다. pan 또는 zoom을 사용할 경우 transform을 이용해서 좌표계를 변환 시키기 때문에 하위에서 좌표 값을 변경하는 경우 이상한 위치로 이동 되는 현상을 볼 수 있다. 이 때에는 pan 또는 zoom 된 값 만큼 좌표 값을 변환 시켜줘야 정상적인 위치로 이동한다. 2019. 4. 5.