D3를 사용하기 위해 실습 파일을 준비해야 합니다. 앞으로 작성할 코드는 지금 준비한 파일에 작성하게 됩니다.
1. 실습 폴더
작성한 코드를 한데 모아둘 폴더를 자신이 찾기 편한 곳에 만듭니다. 앞으로 작성한 코드는 지금 만든 폴더에 저장하면 됩니다. 바탕 화면에 만들어도 좋고 작성한 코드를 모아둔 폴더가 있다면 그 곳도 좋습니다.
예) 바탕 화면/d3실습
2. HTML 파일
1에서 만든 폴더에 파일을 만들고 파일 이름을 d3.html으로 정해줍니다. 파일 이름은 아무거나 해도 상관없습니다.
만든 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>
<!-- <script src="d3/d3.min.js"></script> -->
</head>
<body>
</body>
</html>
|
cs |
D3는 두 가지 방법으로 웹 페이지에서 사용할 수 있도록 하고 있습니다.
하나는 웹에 올라와 있는 소스 코드를 브라우저가 불러와 사용하는 방법입니다. (6번 줄의 코드를 사용합니다.)
다른 하나는 직접 소스 코드를 다운로드 하고 컴퓨터에 저장된 소스 코드를 브라우저가 불러와 사용하는 방법입니다. (7번 줄의 주석처리를 해제하고 사용합니다.)
다음은 각 방법에 대한 설명입니다.
2-1. D3 라이브러리를 온라인으로 사용하기 (6번 줄)
D3는 누구나 사용할 수 있도록 웹에 소스 코드를 업로드 해 놓았습니다. 이 소스 코드를 사용하는 데 드는 비용은 무료입니다. 사용자는 HTML 문서에 다음과 같이 붙여넣으면 사용할 수 있습니다.
|
1
|
<script src="https://d3js.org/d3.v5.min.js"></script>
|
cs |
2-2. D3 라이브러리를 다운로드받아 사용하기 (7번 줄)
D3를 오프라인에서도 사용하기 위해 소스 코드를 다운로드 받아 사용할 수 있습니다. 이 방법은 위의 방법보다 조금 복잡합니다.
1. 먼저 D3.js의 홈페이지로 들어갑니다.
홈페이지 링크 - https://d3js.org/
2. 홈페이지의 윗부분 중간 쯤에 다음과 같이 쓰여져 있는 곳을 찾습니다.
3. d3.zip을 클릭해 파일을 다운로드받습니다.
4. 앞에서 만든 폴더에 d3라는 하위 폴더를 만들고 그곳에 소스 코드 파일을 압축 해제합니다. 하위 폴더의 이름은 다른 것으로 해도 상관 없습니다.
5. HTML 문서에 다음과 같이 붙여넣습니다.
|
1
|
<script src="d3/d3.min.js"></script>
|
cs |
이 때 하위 폴더 이름을 바꾸셨다면 바꾼 폴더 이름으로 경로를 적절하게 수정하시면 됩니다.
2-3. d3.js와 d3.min.js의 차이점
한 마디로 d3.min.js가 d3.js의 경량화 버전입니다. 두 파일은 완전 동일한 코드이고 d3.min.js 파일이 d3.js 파일의 50%정도 용량이 낮습니다. d3.js 코드에서 불필요한 화이트 스페이스 문자(공백, 줄 바꿈, 탭 등의 문자)를 전부 지워서 만든 결과입니다. 이렇게 경량화를 하면 서버와 클라이언트 간에 주고받는 파일 용량이 줄어 비용을 절감할 수 있습니다.
선택 사항 - 자바스크립트 소스 코드 분리하기
자바스크립트는 HTML 문서 내부에 작성할 수도 있고 따로 작성한 스크립트 파일을 HTML 문서에 링크하는 방법으로 작성할 수도 있습니다. HTML 문서 내부에 자바스크립트를 작성하는 것이 편하신 분들은 원래 해왔던 대로 하셔도 됩니다. 다만 코드가 길어질수록 HTML 문서와 자바스크립트 코드를 분리해서 보기 어려워지기 때문에 스크립트 소스 코드를 분리하는 것을 추천합니다. 소스 코드를 분리하셨다면 body 태그의 하위 태그로 해당 스크립트 파일을 연결하시면 됩니다.
body 태그 사이에 여러 내용이 있다면 스크립트를 연결한 태그는 제일 마지막 줄에 넣을 것을 권장합니다. 제일 마지막 줄이 아닌 곳에 있다면 자바스크립트로 태그를 선택하는 과정 중 원하는 태그를 찾지 못해서 오류가 날 수 있습니다.
결과 코드
d3.html
|
1
2
3
4
5
6
7
8
9
10
11
|
<!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>
<script src="script.js"></script>
</body>
</html>
|
cs |
