선택자는 필수 요소입니다.
CSS 선택자를 기반으로 하는데 다음 두 가지를 이용해서 선택을 합니다.
select()
select()는 HTML요소를 선택합니다. 태그, 클래스 이름, ID를 가지고 판단합니다.
예를 들어 div 태그를 선택한다면 태그의 이름을 통해서 d3.select("div") 로 표현합니다.
hi라는 클래스를 선택한다면 .연산자를 통해 d3.select(".hi")로 표현합니다.
hi라는 ID를 선택한다면 #연산자를 통해 d3.select("#hi")로 표현합니다.
DOM 요소 추가하기
HTML문서에 새로운 요소를 추가할 수 있습니다. 이는 append()와 text()를 사용합니다.
append()는 현재 영역의 요소에 하위 요소로 새 요소를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select("div.myclass").append("span");
</script>
</body>
</html>append로 span태그를 붙여주면
<div class = "myclass">
Hello World!<span></span>
</div>이렇게 뒤에 붙게됩니다. 따라서 text 메서드를 사용하여 추가해줄 수 있습니다.
요소 수정
html(), attr(), style(), classed() 메서드를 사용하여 수정할 수 있습니다.
html() 예제
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select(".myclass").html("Hello World! <span>from D3.js</span>");
</script>
</body>
</html>Hello World! from D3.js
가 출력이 됩니다.
attr() 예제
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select(".myclass").attr("style", "color: red");
</script>
</body>
</html>속성으로 style에 색을 빨간색으로 입힙니다.
Hello World!
결과는 이렇게 됩니다.
style() 예제
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select(".myclass").style("color", "red");
</script>
</body>
</html>스타일 속성 자체를 color을 red로 설정합니다.
위 결과와 같습니다.
classed() 예제
● 클래스를 추가하기
d3.select(".myclass").classed("myanotherclass", true);즉 true로 하여 myanotherclass 클래스를 추가합니다.
● 클래스를 제거하기
d3.select(".myclass").classed("myanotherclass", false);즉 false로 하여 클래스를 제거합니다.
● 클래스 검사하기
d3.select(".myclass").classed("myanotherclass");두 번째 파라미터를 생략하면 class 존재 여부에 따라 true와 false를 반환합니다.
selectAll() 메서드
말 그대로 여러 요소를 선택합니다.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h2 class = "myclass">Message</h2>
<div class = "myclass">
Hello World!
</div>
<script>
d3.selectAll(".myclass").attr("style", "color: red");
</script>
</body>
</html>여기서는 myclass 클래스를 가진 h2와 div 모두 영향을 받게되어 두 글자 모두 빨간색이 출력됩니다.
'웹 > JavaScript,JQurey' 카테고리의 다른 글
| D3.js 공부 4 - 데이터 조인 메서드 (0) | 2019.04.02 |
|---|---|
| D3.js 공부 3 - 데이터 조인 (0) | 2019.04.02 |
| D3.js 공부 - 1(svg) (0) | 2019.03.30 |
| JQuery 준비하기 (0) | 2019.02.25 |
| JavaScript 함수 (0) | 2019.02.25 |
