D3.js selection 태그 선택 및 조작 - select(), selectAll()

D3.js는 Select로 태그를 선택하고, 조작을 수행할 수 있다. select, enter selection, exit selection
Tags:

Select 태그 선택

D3.js는 select(단일), selectAll(복수)으로 태그를 선택한다. select에서 대상이 여러 개인 경우 첫 번째 요소가 선택된다.

아래 테이블에서는 이해를 돕기 위해, D3.js를 jQuery와 Javascript 비교하고 있다.

셀렉터 D3.js jQuery Javascript
태그 지정 d3.select("p");, d3.selectAll("p"); $("p"); document.getElementsByTagName("p");
ID 지정 d3.select("#id"); $("#id"); document.getElementById("id");
클래스 지정 d3.select(".cls");, d3.selectAll(".cls"); $(".cls"); document.getElementsByClassName("cls");

셀렉터는 아래와 같이 메소드 체이닝으로 셀렉터를 작성하여, 요소를 특정 할 수 있다.

d3.select("#id").selectAll("p");

selection 태그 조작

Select된 객체를 태그를 조작하는 방법은 아래와 같다.

태그 조작에 대해서도 아래 테이블에서 맞찮가지고, D3.js를 jQuery와 Javascript 비교하고 있다.

동작 d3 jQuery Javascript
속성 조회 selection.attr("id"); selection.attr("id"); selection.getAttribute("id");`
속성 추가 selection.attr("id", "name"); selection.attr("id", "name"); selection.attrAttribute("id", "name");
속성 삭제 selection.attr("id", null); selection.removeAttr("id"); selection.removeAttribute("id");
클래스 추가 selection.classed("cls", true); selection.addClass("cls"); selection.classList.add("cls");
클래스 삭제 selection.classed("cls", false); selection.removeClass("cls"); selection.classList.remove("cls");
스타일 조회 selection.style("color"); selection.css("color"); selection.style.color;
스타일 설정 selection.style("color", "blue"); selection.css("color", "blue"); selection.style.color = "blue";
스타일 삭제 selection.style("color", null); selection.css("color", ""); selection.style.color = "";
속성 값 조회 selection.property("checked"); selection.prop("checked"); selection.checked;
속성 값 설정 selection.property("checked", true); selection.prop("checked", true); selection.checked = true;
HTML 조회 selection.html(); selection.html(); selection.innerHTML;
HTML 설정 selection.html("<p>값</p>"); selection.html("<p>값</p>"); selection.innerHTML = "<p>값</p>";
요소 추가 selection.append("p"); selection.append("<p></p>"); selection.appendChild(document.createElement('div'));
요소 삭제 selection.remove(); selection.remove(); selection.parentNode.removeChild(selection);

Select 기본 사용

먼저 예로서 다음과 같은 HTML을 만든다.

<div>
  <div class="num">One</div>
  <div class="num">Two</div>
  <div class="num">Three</div>
  <div class="num">Four</div>
</div>

<script src="https://d3js.org/d3.v7.min.js"></script>

select()

select() 메소드를 사용해 매치된 첫번째의 DOM 요소를 선택하여 스타일을 설정한다.

d3.select(".num")
  .style("color", "red");

selectAll()

selectAll() 메소드로 매치된 모든 DOM 요소를 선택하여 스타일을 설정한다.

d3.selectAll(".num")
  .style("font-size", "2em");

append()

append() 메소드로 요소를 추가할 수도 있다.

d3.selectAll(".num")
  .append("span")
  .text(" apple");

style()의 func 인수

style 두 번째 인수에 고정 값이 아닌 함수 객체를 사용하여, 동적으로 스타일을 설정한다. 함수 객체의 인수에는 data(이후에 다시 설명)와 index(매치된 요소의 순번)가 전달된다.

d3.selectAll(".num")
  .style("background-color", (data, index) => `hsl(${30 * index}, 50%, 90%)`);

data()

data()를 사용하여 매치된 각 요소에 data를 할당한다. 할당된 데이터는 style 등에 전달되는 함수의 첫 번째 인수로 전달된다. DOM 요소의 수와 data의 수에 따라 대응하고 있는 부분을 update selection 이라고 부른다.

d3.selectAll(".num")
  .data([1, 2, 3, 4])
  .style("margin-left", (data, index) => `${data}em`);

참고




최종 수정 : 2024-01-18