데이터 조인은 데이터들과 그래픽 요소 간의 관계를 만들어줍니다.
즉 데이터들([10,20,30....])을 통해 요소를 조작합니다.
[10, 20, 30, 25, 15] 데이터 세트가 있으면
li에 매핑을 시킬 수 있습니다.
이렇게 HTML이 있으면
<ul id = "list">
<li></li>
<li></li>
</ul> select로 list를 선택해주고 하위 요소 모든 li를 선택합니다. 그다음 data메서드로 매핑시킬 요소를 줍니다.
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return d; });이렇게 text 메서드를 통해 li 매핑된 요소를 가져옵니다. function의 인자 d는 10과 20입니다.
1. li - 10
2. li - 20
10과 20은 li요소에 매핑이 되는데 나머지 30,25,15는 매핑이 되지않습니다.
이를 위해서 enter()와 append()를 통해서 추가해줄 수 있습니다.
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return "전에 존재하던 요소들: " + d; })
.enter()
.append("li")
.text(function(d)
{ return "새롭게 동적으로 추가된 요소들: " + d; });위처럼 enter()와 append로 li를 동적으로 추가해줍니다.
만약에 동적으로 데이터 세트의 어떤 요소를 제거해주고 싶다면
exit()와 remove()를 사용합니다.
전체적인 코드를 보면
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<ul id = "list">
<li></li>
<li></li>
</ul>
<input type = "button" name = "remove" value = "Remove fourth value"
onclick = "javascript:remove()" />
<script>
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d)
{ return "전에 존재하던 요소들 " + d; })
.enter()
.append("li")
.text(function(d)
{ return "새롭게 동적으로 추가된 요소들 " + d; });
function remove() {
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()
}
</script>
</body>
</html>시행 결과
만약 제거 버튼 클릭 시 자바스크립트 함수로 4번째 요소가 사라집니다.
다음 포스트는 데이터 조인 메서드들에 대해 자세히 알아보겠습니다.
'웹 > JavaScript,JQurey' 카테고리의 다른 글
| D3.js 공부 5 - SVG (0) | 2019.04.03 |
|---|---|
| D3.js 공부 4 - 데이터 조인 메서드 (0) | 2019.04.02 |
| D3.js 공부 2 - 선택자 (0) | 2019.03.31 |
| D3.js 공부 - 1(svg) (0) | 2019.03.30 |
| JQuery 준비하기 (0) | 2019.02.25 |
