[D3] Selecting elements 이용하여 요소 선택하기

선택 방법에는 select와 selectAll 두 가지 형식이 있습니다. select는 일치하는 첫 번째 요소만 선택합니다. selectAll은 일치하는 모든 요소를 선택합니다.

selection()

root 요소인 document.documentElement를 선택합니다. prototype을 확장할 수 있습니다.

d3.selection.prototype.checked = function(value) {
	return this.property('checked',!!value)
}
d3.select(checkbox).checked()

select(selector)

일치하는 첫 번째 요소를 선택합니다. 요소를 찾지 못하면 빈 선택 항목을 반환합니다. 

const svg = d3.select('#chart')

문자열이 아닌경우 지정된 노드를 선택합니다.

d3.select(event.currentTarget)

selectAll(selector)

일치하는 모든 요소를 선택합니다. 요소를 찾지 못하면 빈 선택 항목을 반환합니다. 

selection.select(selctor)

선택한 각 요소에 대해 일치하는 첫 번째 하위 요소를 선택합니다. 일치하는 요소가 없으면 해당 인덱스에 null이 반환됩니다. selector가 함수인 경우 현재 datum과 현재 인덱스 현재 그룹이 함수 인자로 전달됩니다. 그룹화에 영향이 없습니다.

d3.selectAll('p').select('b')

selection.selectAll(selector)

선택한 각 요소에 대해 일치하는 하위 요소를 선택합니다. 일치하는 요소가 없으면 해당 인덱스에 null이 반환됩니다. 

selector가 함수인 경우 현재 datum과 현재 인덱스 현재 그룹이 함수 인자로 전달됩니다. 그룹화에 영향을 미칩니다.

selection.filter(filter)

선택 항목들을 필터링하여 필터가 true인 요소만 새 선택 항목으로 반환합니다. filter로 문자나 함수를 지정할 수 있습니다.

함수인 경우 현재 datum과 현재 인덱스 현재 그룹이 함수 인자로 전달됩니다. 

const even = d3.selectAll("tr").filter(":nth-child(even)");

필터링의 결과 값에 원본 인덱스를 알 수 없으므로 Selction.select를 사용하여 인덱스를 보존할 수도 있습니다.

const even = d3.selectAll("tr").select(function(d, i) { return i & 1 ? this : null; });

selection.selectChild(selector)

selector와 일치하는 항목에서 첫 번째 요소를 선택합니다. selector가 지정되지 않으면 하위 목록 중에서 첫 번째 요소를 선택해서 가져옵니다. selector가 함수인 경우 파라미터로 현재 요소와 현재 인덱스와 전체 하위목록을 순서대로 전달합니다.

selection.selectChildren(selector)

selectChild에서 선택된 모든 요소를 선택합니다. selector가 지정되지 않으면 모든 하위 항목이 선택됩니다.

selection.selection()

현재 선택된 항목을 반환합니다. 

matcher(selector)

지정된 selector와 일치하면 true를 반환하는 함수를 반환합니다. filter에서 내부적으로 사용됩니다.

selector(selector)

selector와 일치하는 첫 번째 자손을 반환하는 함수를 반환합니다. selection.select()에서 내부적으로 사용됩니다.

selectorAll(selector)

selector와 일치하는 모든 하위 항목을 반환하는 함수를 반환합니다.selection.selectAll()에서 내부적으로 사용됩니다.

window(node)

지정된 노드의 소유자 창을 반환합니다.

style(node, name)

지정된 노드에 대해 지정된 이름을 가진 스타일 속성의 값을 반환합니다.