[D3] Modifying elements를 이용하여 요소 변경하기

selection.attr(name, value)

값이 지정되면 지정된 이름의 속성을 선택한 요소의 지정된 값으로 설정 후 선택 항목을 반환합니다. value가 함수일 경우 파라미터로 현재 데이터, 현재 인덱스, 현재 그룹이 전달됩니다. value가 지정되지 않은 경우 속성의 현재 값을 반환합니다.

selection.classed(names, value)

값이 지정된 경우 클래스 속성을 설정하거나 classList 속성을 수정하여 클래스를 할당하거나 취소하고 반환합니다.

공백을 이용하여 다수의 클래스를 설정할 수 있습니다. 함수일 경우 attr과 같습니다.

selection.style(name, value, priority)

값이 지정되면 지정된 이름의 스타일 속성을 지정된 value로 설정하고 선택 항목을 반환합니다.

value가 함수일 경우 attr과 같습니다. value가 null일 경우 스타일 속성을 제거합니다. priority는 null 또는 important로 지정할 수 있습니다. 값이 지정되지 않으면 현재 스타일 속성 값을 반환합니다.

selection.property(name, value)

HTML 요소에 속성을 설정하거나 가져옵니다. 값이 지정되면 요소의 지정된 값으로 설정되고 함수일 경우 attr과 같습니다. null일 경우 지정된 속성을 삭제합니다. 값이 없으면 현재 속성 값을 반환합니다.

selection.text(value)

값이 지정되면 text content를 모든 요소에 대해 지정된 값으로 설정하여 기존 하위 요소를 대체합니다. 함수일 경우 attr과 같습니다. null일 경우 content를 삭제합니다.

selection.html(value)

값이 지정되면 innerHtml를 모든 요소에 대해 지정된 값으로 기존 하위 요소를 대체합니다. 함수일 경우 attr과 같습니다. null일 경우 삭제합니다.

selection.append(type)

type에 대한 요소를 선택한 각 요소의 마지막 하위 요소로 추가합니다. selection.enter()의 경우 형제 항목 앞에 추가합니다.

selection.insert(type, before)

insert의 경우에는 before를 이용하여 원하는 요소 앞에 삽입할 수 있습니다. 

selection.remove()

선택한 요소를 제거합니다. DOM에서 제거된 요소를 반환합니다. insert나 append를 통해서 다시 요소를 추가할 수 있습니다.

selection.clone(deep)

선택한 요소 바로 뒤에 선택한 요소의 복제본을 삽입 후 새로 추가된 복제본을 반환합니다. deep이 true일 경우 하위 노드도 복제됩니다.

selection.sort(compare)

비교 기능에 따라 정렬된 선택 항목을 반환합니다. 정렬 후 결과 순서와 일치하도록 요소를 다시 삽입합니다.

selection.order()

문서 순서가 선택 순서와 일치하도록 요소를 문서에 다시 삽입합니다.데이터가 이미 정렬된 경우 sort보다 훨씬 빠릅니다.

selection.raise()

선택한 각 요소를 상위 요소의 마지막 하위 요소로 순서대로 다시 삽입합니다.

selection.lower()

선택한 각 요소를 상위 요소의 첫 번째 하위 요소로 순서대로 다시 삽입합니다.

creator(name)

지정된 요소 name이 주어지면 this가 상위 요소라고 가정하고 지정된 이름의 요소를 생성하는 함수를 반환합니다. append와 insert에서 내부적으로 새 요소를 생성하는 데 사용됩니다.