D34 줌 및 이동 초기화 왜 안되지? 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. select와 selectAll 문서요소 그룹핑 d3 라이브러리르 사용하면서 가장 많이 사용하는 메소드는 바로 select다. 데이터를 바인딩 하거나 문서 요소를 조작하려면 먼저 요소를 찾아야 하기 때문이다. select 선택된 문서요소를 원소로 하는 한 개의 group 배열을 원소로 하는 배열을 반환한다. const selection = d3.select('div'); selectAll 선택된 모든 문서요소를 원소로 하는 한 개의 group 배열을 원소로 하는 배열을 반환한다. const selection = d3.selectAll('div'); select 이후 data와 연동해서 많이 사용한다. 2018. 10. 16. D3란 무엇인가? D3.js란? Data Drivened Document'의 약자(3개의 D로 시작하기 때문) HTML, SVG(Scalable Vector Graphics), CSS를 사용해 데이터를 시각적인 결과물로 나타낸다. 간단히 요약하자면 차트 형태나 그래프, 트리 형태 등으로 데이터를 화려하고, 예쁘게 표현한다. 기본적인 사용방법은 어느 js 라이브러리(jquery 등)와 비슷한데 메서드 체이닝 방식이 기본이다. 예제 node.append('text') .attr('dx', -18) .attr('dy', 8) .style('font-family', 'overwatch') .style('font-size', '18px') .text(d => d.name); 요구사항 인터넷 익스플로러8 이하를 제외한 모든 웹 브라우저 2018. 10. 16. 이전 1 다음
