d3.js가 뭔지는 스스로 찾아보도록 하자. Data Visualize등의 분야에서는 d3이 거의 업계 표준(?)이라고 한다.
DOM이란?
사실 DOM이나 Virtual DOM이니 말은 많이 하지만 정작 DOM이 뭐야? 하면 떠오르는 것은... Cham Dom... Dol Dom...
DOM(Document Object Model)은 일종의 인터페이스이다. 뭐에 대한? 웹 문서에 대한.
그러니까 DOM이 웹 문서 그 자체라고 하면 틀린 말이 되시겠다.
d3.js의 DOM 조작 방식
React가 그렇고, Vue가 그렇듯이...
하지만 d3는 Virtual DOM을 사용하지 않고 DOM을 직접 조작한다. Angular나 Svelte가 이런 방식을 사용한다.
그래서 React와 d3을 같이 사용하면 몇가지 메롱하는 일들이 일어나고는 한다는데 이에 대해서는 추후에 포스팅 할 수 있었으면 좋겠다 ㅎㅎ
Element 선택하기
documentGetElemenyBy~~~ 와 비슷한 일을 하는 친구지만, 뱉어내는 값이 d3 객체인 Selection 을 뱉어내는 점이 다르다.
d3.select(PARAM) 혹은 d3.selectAll(PARAM) 으로 호출하며, 둘의 차이는 메소드 명 그 자체다 (.....)
PARAM 으로는 CSS Selector 를 이용할 수 있다. d3.select("body") 하면 body 태그를, d3.select(".class") 하면 class 클래스를 선택하는 식이다.
d3 배우고 왜 이렇게 익숙할까 했는데 jQuery 맛이다 ㅎㅋ
Element 추가하기
d3에서는 기본적으로 Java 등지에서 많이 쓰이는 Chained-Method 를 이용한다.
Element를 추가할때는 Selection 객체에 append라는 메소드를 호출하여 사용한다.
d3.select("body").append("svg");
JavaScript
복사
body 태그를 선택해서 svg라는 태그를 추가하는 것을 지나가던 초딩도 알아볼 수 있다.
Element 삭제하기
d3.select("#div").remove()
JavaScript
복사
코드가 곧 내용
Element Attribute 조작하기
Attribute 등을 조작할때는 다음과 같이 한다.
먼저 property를 조작할때는 기본적으로 아래와 같이 한다.
d3.select("svg")
.attr("width",1000)
.attr("height",1000)
JavaScript
복사
굉장히 직관적이다. Style 을 조작할때는 아래와 같이 하면 된다.
d3.select("circle")
.style("fill","green");
JavaScript
복사
attribute나 style 값 하나마다 일일히 attr을 불러와야 하는가....Vanila d3은 그렇습니다.. 하지만 그런 당신을 위해 d3-multi-selection 이라는 모듈도 존재하니 이게 싫으면 이것을 사용하자.