D3.js 데이터 바인딩 방법 - data(), enter()
데이터 바인딩 방법
D3는 다양한 데이터 형식에 대응을 하고, CSV나 JSON 등을 읽는 메소드가 제공된다.
여기에서 간단히 다음 예제 데이터 세트를 준비합니다.
var dataset = [ 1, 2, 3, 4, 5 ];
아래 코드에 데이터와 요소를 연결해 보도록 하겠다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<script>
// 여기에 코드를 작성한다.
var dataset = [ 1, 2, 3, 4, 5 ];
</script>
</body>
</html>
먼저 어떤 요소에 연결할지 결정해야 한다.
d3.select("body").selectAll("p")
<body> 태그에서 <p> 요소를 선택하였다.
하지만, 선택하려는 <p> 태그는 아직 존재하지 않는다. 여기에 D3 독특한 방법을 적용한다. 아직 없는 요소를 선택하고, 거기에 추가하기 위해 enter()를 사용한다. 최종 방법은 아래와 같다.
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("Hello!");
이 방법으로 무엇을 하고 있는지 살펴 보면 페이지에서 <body>태그를 검색하였다.
d3.select("body")
그리고 다음 메서드에서 참조를 전달하였다.
.selectAll("p")
참조로 전달 된 <body>내의 <p> 요소를 검색하고 전달한다. 아직 존재하지 않으므로 빈 선택을 다음 메서드에 전달한다.
.data(dataset)
데이터 수를 계산하고 분석한다. 여기서는 5개의 값이 설정된다.
.enter()
데이터가 바인드된 새로운 요소를 작성하려면 enter()를 사용해야 한다. 이 메소드는 페이지의 대상으로 하는 요소를 조사하여, 다음에 건네받는 데이터를 조사한다.
대상으로 하는 요소보다 많은 데이터치가 있는 경우, 임시의 참조 장소를 작성하여, 다음의 메소드에 그 참조를 건네준다.
.append("p")
enter()에 의해 작성된 임시 참조 위치를 받아, <p> 요소를 페이지에 삽입한다. 그 다음으로는 작성한 요소에 참조를 다음의 메소드에 건네준다.
.text("Hello!")
새로 만든 <p> 요소에 대한 참조를 가져와 텍스트 값을 삽입한다.
최종 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<script>
// 여기에 코드를 작성한다.
var dataset = [ 1, 2, 3, 4, 5 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("Hello!");
</script>
</body>
</html>
실행을 해보면, 아래와 같이 “Hello!“가 5개 표시된다.
Google Chorme 개발자 도구로 페이지를 구문 확인해보면, 아래와 같이 5개의 p 태그가 추가되었음을 알 수 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<script>
// 여기에 코드를 작성한다.
var dataset = [ 1, 2, 3, 4, 5 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("Hello!");
</script>
<p>Hello!</p>
<p>Hello!</p>
<p>Hello!</p>
<p>Hello!</p>
<p>Hello!</p>
</body>
</html>
데이터 사용법
바인드한 데이터의 사용법을 설명한다.
바인딩된 데이터를 먼저 준비한다.
var dataset = [ 1, 2, 3, 4, 5 ];
아래의 메소드내의 인수를 함수로 합니다.
예를 들어, 아래 같은 코드가 있을때,
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("Hello!");
마지막 라인이 text()함수를 아래와 같이 변경해 준다.
.text(function(d) { return d; });
그러면 아래와 표시가 된다.
data()를 호출한 후에는 언제든지 연속된 메소드 내에서 입력 값으로 받아오는 함수를 만들 수 있다.
javascript의 함수는 아래와 같은 형태로 설정한다.
function (입력값) {
// 여기에 처리 코드를 넣는다.
return 출력값;
}
D3에서 데이터를 사용할 때는 입력값에 반드시 입력 값에 d를 선언한다. 입력 값에 d를 설언하지 않으면 바인딩된 데이터를 참조할 수 없다.
인수를 함수로 하면, 다음과 같은 처리도 가능하다.
.text(function(d) {
return "이 값은 " + d + "이다";
});
함수내의 처리를 변경하는 것으로 여러가지 처리가 할 수 있게 된다.
속성 설정
attr() 및 style()과 같은 D3의 다른 메서드와 결합하면 HTML 및 CSS 속성을 설정할 수 있다.
예를 들어, 다음과 같이 코드에 style 관련 함수를 더 추가하면 설정한 내용이 요소에 반영된다.
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) {
return "이 값은 " + d + "이다";
})
.style("color", "red");
모든 텍스트가 빨간색이 변경이 되었다.
여기에서도 함수를 사용하여 데이터에 따라 색상을 변경할 수도 있다.
.style("color", function(d) {
if (d % 2 == 0) {
return "red";
} else {
return "black";
}
});
d를 2로 나눠서 0인 경우, 즉 d가 짝수인 경우에 빨간색으로 변경되었다.