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