DOM Elements를 조작할 수 있는 D3.js 객체, group과 parents 속성을 가지고 있다.
group
은 Dom Element
를 배열 형태로 저장한다.
parents
는 Selection이 생성됐을 때의 정보, 기본적으로 HTML Element
를 가리킨다.
d3.select(selector)
,d3.selectAll(selector)
메서드를 이용해서Selection
을 생성한다.
d3.selector(selector)
d3.selectAll(selector)
querySelectorAll(selector) 메서드로 일치하는 모든 DOM Element를 찾는다
일치한 모든 요소를 Selection
객체로 구성한다.
두 메서드 모두 일치하는 요소가 없다면, 빈 배열로 구성된 Selection 객체를 만든다.
selection.text([value])
Selection이 가리키는 elements의 텍스트를 가져온다.
호출 시 인수(value)가 있다면, 해당 값으로 Selection의 텍스트를 설정한다.
selection.attr(name[, value])
selection.style(name[, value[, priority]])
value가 없는 경우, name에 정의된 스타일을 가져온다.
value가 있는 경우, name의 스타일을 설정한다.
priority는 우선 순위로, null 혹은 important(느낌표 제외)로 설정할 수 있다.
selection.classed(names[, value])
value가 없는 경우, names에 해당하는 CSS class 여부(true, false)를 확인
value가 true인 경우, Selection이 가리키는 element에 names
에 해당하는 class를 추가
value가 false인 경우, Selection이 가리키는 element에 names
에 해당하는 class를 제거
selection.append(type)
Selection이 가리키는 Element의 자식 요소를 추가.
새롭게 생성된 요소를 반환하기 때문에 체이닝시 유의하자.
selection.remove()
Selection이 가리키는 Element를 DOM에서 제거한다.
제거된 요소를 반환
selection.insert(type[, before])
before 속성이 없다면 기본적으로 append
와 동일한 동작을 한다.
before 속성이 있는 경우, before에 정의된 선택자의 첫 번째 요소의 앞에 새로운 요소가 추가된다.
selection.clone([deep])
Selection이 가리키는 요소를 복제하고, 선택한 요소의 뒤에 추가한다.
deep
속성이 truthy
인 경우, 해당 요소의 자식 요소들도 모두 복제한다.
selection.raise()
selection.lower()
selection.sort(compare)
compare
함수를 기반으로 Selection의 요소들을 정렬한 뒤, 순서대로 DOM에 다시 삽입한다.selection.node()
selection.nodes()
selection.call(function[, arguments...])
인수로 전달된 함수를 실행하는 메서드, 호출한 Selection
을 반환한다.
arguments
는 실행할 함수에 전달할 매개변수
인수로 전달된 함수의 첫 번째 매개변수는 해당 함수를 호출한 Selection
객체가 전달된다.
이 외에도 다양한 메서드가 존재한다. d3-selection을 참고하자!