데이터 조인 메서드는 총 4가지를 제공합니다.
datum()
data()
enter()
exit()
datum() 메서드
이 메서드는 단일 요소에 단일 데이터를 지정해 줄 때 사용합니다.
우선 예제를 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<p></p>
<div></div>
<script>
d3.select("p")
.datum(50)
.text(function(d) {
return "Used existing paragraph element and the data " + d + " is assigned.";
});
d3.select("div")
.datum(100)
.append("p")
.text(function(d) {
return "Created new paragraph element and the data " + d + " is assigned.";
});
</script>
</body>
</html><p>와 <div>는 기본적으로 존재합니다.
여기서 d3.select("p")로 선택해주고 datum(50) 메서드를 통해 출력해면
Used existing paragraph element and the data 50 is assigned. 이 출력될 겁니다.
d3.select("div")를 선택해주고 datum(100)으로 지정해주는 대신 새로운 하위요소 <p>를 append를 해주고 출력하면
Created new paragraph element and the data 100 is assigned. 이 출력될 겁니다.
이렇듯 datum()메서는 단일요소에 적용시킵니다.
data() 메서드
요소 컬렉션에 데이터 세트를 지정해줄때 사용합니다.
datum()은 단일 데이터 data는 데이터 세트!!
전의 글에서 살펴봤듯이 이 메서드는
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15]);이렇게 적용을 시켜주었죠.
[10,20,30,25,15]라는 데이터세트를 지정합니다.
enter() 메서드
이 메서드는 기존에 없는 요소에 지정할 때 사용합니다.
이전 글에서 확인을 했었죠.
기억이 안나신다면
2019/04/02 - [분류 전체보기] - D3.js 공부 3 - 데이터 조인
D3.js 공부 3 - 데이터 조인
데이터 조인은 데이터들과 그래픽 요소 간의 관계를 만들어줍니다. 즉 데이터들([10,20,30....])을 통해 요소를 조작합니다. [10, 20, 30, 25, 15] 데이터 세트가 있으면 li에 매핑을 시킬 수 있습니다. 이렇게 HT..
dlwjdcks5343.tistory.com
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d) { return "This is dynamically created element and the value is " + d; });즉 enter()를 통해서 li를 동적으로 추가해줬죠.
exit() 메서드
이 메서드도 이 전 글에서 봤지만 동적으로 어떤 요소를 제거할 때 사용합니다.
function remove() {
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()
}
흔히 익명 함수를 쓰는데 이에 대해 설명해보자면
.text(function(d, i) {
return d;
});이러한 text 익명 함수가 있으면
d는 데이터!!
i는 데이터 인덱스입니다.
값을 찍어 볼까요??!!
.text(function (d, i) {
console.log(d); // 데이터 요소
console.log(i); // 인덱스!
console.log(this); // 현재 DOM 객체
return d;
});console.log로 찍어주고 f12로 확인해봅시다.
우선 결과는
f12 콘솔 창에서는
'웹 > JavaScript,JQurey' 카테고리의 다른 글
| D3.js 공부 6 - SVG 변환 (0) | 2019.04.10 |
|---|---|
| D3.js 공부 5 - SVG (0) | 2019.04.03 |
| D3.js 공부 3 - 데이터 조인 (0) | 2019.04.02 |
| D3.js 공부 2 - 선택자 (0) | 2019.03.31 |
| D3.js 공부 - 1(svg) (0) | 2019.03.30 |
