D3.js 기초

맛보기

맛보기로 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

댓글

댓글 본문
작성자
비밀번호
버전 관리
kolpi12
현재 버전
선택 버전
graphittie 자세히 보기