맛보기로 D3를 이용한 아주 간단한 코드를 작성합니다.
1. 코드 작성
1-1. HTML 코드
HTML 코드를 다음과 같이 수정합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>D3 실습</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<div></div>
<script src="script.js"></script>
</body>
</html>
|
cs |
body 태그 사이에 div 태그를 하나 추가하면 됩니다.
1-2. Javascript 코드 작성
자바스크립트 코드를 다음과 같이 작성합니다.
|
1
|
d3.select('div').text('안녕하세요!')
|
cs |
2. 웹 브라우저에서 실행
웹 브라우저에서 HTML 파일을 열면 화면에
안녕하세요!
라고 나타납니다.
3. 간단한 설명
div 태그의 내용을 안녕하세요! 라고 바꾸는 코드입니다.
웹 브라우저에서 실행한 화면을 보고 작성한 코드가 어떤 기능을 하는지 감이 왔을것입니다.
지금 작성한 코드는 다음 바닐라 자바스크립트 코드와 완벽히 동일한 기능을 수행합니다.
|
1
|
document.querySelector('div').innerText = '안녕하세요!'
|
cs |
