d3.select : 현재 문서에서 특정태그 하나 선택
d3.selectAll - 특정 태그 전체를 선택
selection.attr - 선택된 태그의 속성값 지정
selection.data - 참조 연결할 데이터를 가져옴. (선택된 태그에 대한 데이터 매칭)
selection.enter - 데이터 개수 만큼 태그가 부족할때, 부족한 갯수만큼 플레이스 홀더를 반환
selection.append - 새로운 태그를 추가
selection.exit - 종료(더이상 필요없는 태그 반환)
selection.remove - 현재 문서에서 선택된 태그를 제거
d3.select, d3.selectall을 하면 반환되는것은 selection 객체이다.
예를 들어
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body") // 1
.selectAll("p") // 2
.data(dataset) // 3
.enter() // 4
.append("p") // 5
.text("New paragraph!"); // 6
1. body 요소를 선택
2. p태그를 가진 요소를 선택
3. 해당 태그와 dataset을 바인딩
4. 바인딩 되지 못하고 남은 녀석들의 selction 객체 반환
5. 해당 객체에 p라는 태그를 더 붙임
6. 이 새로운 요소에 "new paragraph!"라는 text을 쓴다.
이렇게 진행된다.
참조한곳 -
https://mobicon.tistory.com/314?category=539879