D3.js-설치

이 장에서는 D3.js 개발 환경을 설정하는 방법을 배웁니다. 시작하기 전에 다음 구성 요소가 필요합니다.

D3.js 라이브러리
Editor
웹 브라우저
웹 서버

단계를 하나씩 자세히 살펴 보겠습니다.

D3.js 라이브러리

D3.js를 사용하여 데이터 시각화를 생성하려면 D3.js 라이브러리를 HTML 웹 페이지에 포함해야합니다. 다음 두 가지 방법으로 할 수 있습니다.

프로젝트 폴더에서 D3.js 라이브러리를 포함합니다.
CDN (Content Delivery Network)의 D3.js 라이브러리를 포함합니다.

D3.js 라이브러리 다운로드

D3.js는 오픈 소스 라이브러리이며 라이브러리의 소스 코드는 웹에서 무료로 사용할 수 있습니다. https://d3js.org/웹 사이트. D3.js 웹 사이트를 방문하여 최신 버전의 D3.js (d3.zip)를 다운로드하십시오. 현재 최신 버전은 4.6.0입니다.

다운로드가 완료되면 파일의 압축을 풀고 d3.min.js. 이것은 D3.js 소스 코드의 축소 된 버전입니다. d3.min.js 파일을 복사하여 프로젝트의 루트 폴더 나 모든 라이브러리 파일을 보관할 다른 폴더에 붙여 넣습니다. 아래와 같이 HTML 페이지에 d3.min.js 파일을 포함합니다.

Example − 다음 예를 살펴 보겠습니다.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js는 자바 스크립트 코드이므로 "script"태그 내에 모든 D3 코드를 작성해야합니다. 기존 DOM 요소를 조작해야 할 수도 있으므로 "body"태그의 끝 바로 전에 D3 코드를 작성하는 것이 좋습니다.

CDN의 D3 라이브러리 포함

CDN (Content Delivery Network)에서 HTML 페이지에 직접 연결하여 D3.js 라이브러리를 사용할 수 있습니다. CDN은 파일이 호스팅되고 지리적 위치에 따라 사용자에게 전달되는 서버 네트워크입니다. CDN을 사용하는 경우 소스 코드를 다운로드 할 필요가 없습니다.

CDN URL을 사용하여 D3.js 라이브러리 포함 https://d3js.org/d3.v4.min.js 아래와 같이 우리 페이지에.

Example − 다음 예를 살펴 보겠습니다.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js 편집기

코드 작성을 시작하려면 편집기가 필요합니다. 다음과 같은 JavaScript를 지원하는 훌륭한 IDE (통합 개발 환경)가 있습니다.

Visual Studio 코드
WebStorm
Eclipse
숭고한 텍스트

이러한 IDE는 지능적인 코드 완성 기능을 제공하고 일부 최신 JavaScript 프레임 워크를 지원합니다. 멋진 IDE가 없다면 항상 메모장, VI 등과 같은 기본 편집기를 사용할 수 있습니다.

웹 브라우저

D3.js는 IE8 이하를 제외한 모든 브라우저에서 작동합니다.

웹 서버

대부분의 브라우저는 로컬 파일 시스템에서 직접 로컬 HTML 파일을 제공합니다. 그러나 외부 데이터 파일을로드 할 때 특정 제한이 있습니다. 이 튜토리얼의 후반부에서는 다음과 같은 외부 파일에서 데이터를로드합니다.CSV 과 JSON. 따라서 처음부터 웹 서버를 설정하면 더 쉬울 것입니다.

IIS, Apache 등 익숙한 웹 서버를 사용할 수 있습니다.

페이지보기

대부분의 경우 웹 브라우저에서 HTML 파일을 열어서 볼 수 있습니다. 그러나 외부 데이터 소스를로드 할 때 로컬 웹 서버를 실행하고 서버에서 페이지를 보는 것이 더 안정적입니다.(http://localhost:8080).