- Loading : 시각적 요소를 그리기 전 보여주고자 하는 데이터를 불러온다.
- Selecting-Binding : 작업할 공간을 선택하고, 시각적 요소 안에 데이터 수치를 입력한 코드에 맞춰 연결(바인딩)한다.
- Transfrom : graph의 유형, 색상, 축 등 다양한 요소를 지정한다.
- Transition : 클릭, 드래그 등 인터랙션 효과 지정
d3.select()
특정 태그 하나를 선택한다.
d3.selectAll()
특정 태그 전체를 선택한다.
selection.attr()
선택태그의 속성값을 지정한다.
selection.data()
차트에 사용할 데이터를 가져온다. 선택된 태그에 대한 데이터 매칭
selection.enter()
태그가 데이터 개수보다 부족할 때 추가한다. 부족한 개수만큼 플레이스 홀더를 반환.
selection.append()
새로운 태그를 추가한다.
selection.exit()
종료한다.(더 이상 필요없는 태그 반환)
selection.remove()
선택된 태그를 제거한다.
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body") // body 요소 선택
.selectAll("p") // p태그를 가진 요소를 선택
.data(dataset) // 해당 태그와 dataset을 바인딩
.enter() // 바인딩 되지 못하고 남은 녀석들의 selection 객체 반환
.append("p") // 해당 객체에 p라는 태그를 더 붙임
.text("New p!"); // 이 새로운 요소에 "New p!" 라는 text 추가
<이미지 출처 : https://www.slideshare.net/aliceinwoon/d3js-2 >
References :
https://velog.io/@smooth97/-Data-Visualizing-D3.js-%EB%9E%80
https://cyberx.tistory.com/211