[D3] D3 append함수, Update Pattern (2)

1. 정리

• 앞 장 에서는 Selection과 자주 사용되는 함수에 대해서 학습하였다.
• 다음으로는 D3의 더 복잡한 내용을 다루도록 하겠다.

 

---

2. 함수

2.1. Append

• 설명
• append 함수를 이용해서 tag를 생성할 수 있음

letsvg = d3.select("#svg");

svg.append("circle")
	.attr("cx",10)
    	.attr("cy",20)
    	.attr("r",5)

2.2. Update Pattern

2.2.1. enter

• data함수를 통해 데이터가 저장되어 있음
• 데이터가 svg에는 들어가 있지 않음

2.2.2. update

• data함수를 통해 데이터가 저장되어 있음
• 데이터가 svg에 들어감

 

2.2.3. exit

• data함수를 통해 데이터가 저장되어 있지 않음
• 데이터가 svg에 들어감
• enter에서 사용한 코드와 거의 유사함, append와 enter만 없음

 

2.2.4. 실습

• 여러 개의 태그를 동시에 생성함
  • attr 내부에 함수를 넣어주게되면 각 circle에 다른 값이 들어간다.
• 예) 여러 개의 원을 동시에 만들어줌

let svg = d3.select("#svg");
let data = [{x:100,y:100},{x:200,y:200}{x:300,y:300}]

svg.selectAll("circle")
  .data(data)
  .join("circle")
  .attr("cx",d=>d.x)
  .attr("cy",d=>d.y)
  .attr("r",2.5)