[D3] Selection 사용법 (1)

 

1. 데이터 시각화와 D3

• 데이터를 그림, 그래프 형태로 보여주어 대략적인 데이터의 중요사항을 한눈에 알 수 있도록 함
• D3는 데이터 시각화를 위한 도구, Javascript 라이브러리이다.
• D3를 실행한 결과는 HTML이다.

---

2. D3 입력 방법

• html 파일에 삽입하여 사용

<script src="https://d3js.org/d3.v6.min.js"></script>
<script> 
/* D3 코드 */ 
</script>

 

---

3. D3 기능

• SVG의 요소를 ADD, modify, remove 할 수 있다.
• SVG (html을 활용해 그래프를 그릴 수 있는 라이브러리)

---

4. Selecting Elements

4.1. select

• 설명
  • 하나의 element만 불러옴
  • # 은 html의 아이디를 불러옴
  • . 은 html의 클래스를 불러옴
• 예시
  • d3.select(".apple")
  • d3.select("#apple")

4.2 selectAll

• 예시
  • d3.selectAll(".apple")
  • d3.selectAll("#apple")

---

5. Modifying Elements

5.1. attr

•  설명
  • select에서 검색한 값의 뒤에 사용함
  • html 태그에서 속성을 변경할 수 있음
• 예시 

ethovered=d3.select(".hovered");
hovered.attr("cx",10)
	.attr("cy",20)
	.attr("r",5)

• 단순히 값을 불러오고 싶을 때 (getter 역할을 함)
  • .attr("cy") 까지만 작성하면 됨

5.2. style

• 설명
  • html 태그에 style을 줄 수 있음
• 예시

lethovered=d3.select(".hovered");
hovered.attr("cx",10).attr("cy",20)
	.attr("r",5)
    .style("fill","white")
    .style("stroke","blue")
    .style("stroke-width","2px")

5.3. text

• 설명
  • 태그에 텍스트를 추가해 줌 (html의 value값에 해당함)
• 예시

lethovered=d3.select(".hovered");
hovered.attr("cx",10).attr("cy",20)
	.text("Hello world")

 

5.4. classed

• 설명
  • 클래스의 이름을 제거하거나 변경할 수 있음
  • false는 이름을 삭제
  • True는 해당 이름을 사용
• 예시

• lethovered=d3.select(".hovered");
  hovered.classed("hovered",false)
      .classed("new-hovered",true)