본문 바로가기

Javascript/d36

줌 및 이동 초기화 왜 안되지? 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 insert 잘 사용하자 d3에서 특정 요소 하위에 다른 요소를 집어 넣는 방법은 크게 2가지가 있다. append & insert dom의 appendChild와 insertBefore와 같은 동작이다. append는 맨 뒤에 넣고, insert는 앞에 넣고! 단, 오늘 insert를 처음 사용하면서 실수한 건 insert는 2개의 인자를 받는데 type, tag 이름이 들어간다. before, 뒤에 올 특정 선택자(css 선택자 사용) 여기에서 before 부분을 이해를 잘못해서 삽질을 했다. 문서를 잘 읽어야지... CSS 선택자를 사용해야 한다! 2019. 4. 19.
좌표 시스템 좌표계 d3에서 svg 엘레먼트들을 드래깅해서 위치 값을 변경해주는 경우가 생긴다. 이 때 2가지의 방법이 있다. 각 엘레먼트들을 독립적으로 좌표값을 변경시키는 방법 각 엘레먼트들을 group으로 묶고 group을 transform의 translate를 이용해서 변경시키는 방법 나는 2번을 이용해서 구현했는데, 이렇게 되면 메인 svg에 pan & zoom 기능이 있을 경우에 좌표 시스템이 변환이 된다. pan 또는 zoom을 사용할 경우 transform을 이용해서 좌표계를 변환 시키기 때문에 하위에서 좌표 값을 변경하는 경우 이상한 위치로 이동 되는 현상을 볼 수 있다. 이 때에는 pan 또는 zoom 된 값 만큼 좌표 값을 변환 시켜줘야 정상적인 위치로 이동한다. 2019. 4. 5.
Data Join Data Join이란? 기본적으로 이미 존재하는 Element에 데이터를 매핑하는 것이다. 그럼으로써 Element를 주입, 수정, 제거 할 수 있게 해준다. Data set [10, 20, 30, 25, 15] HTML D3.js code d3.select("#list").selectAll("li") .data([10, 20, 30, 25, 15]) .text(function(d) { return d; }); 위의 코드를 실행 하게 되면 아래와 같이 실행되게 된다. 10 20 현재 li Element가 2개만 실제로 존재하고 있기 때문에 3,4,5 번째 값은 출력이 되지 않는다. 나머지 값들이 출력되도록 하려면 조작을 해줘야 한다. Element가 없다면 생성하도록 해줘야 한다. d3.select("#.. 2019. 3. 8.
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.