전체메뉴

라이브러리

아이콘
라이브러리는 자주 쓰일 만한 기능, 함수들을 모아 놓은 클래스들의 모음으로써 소프트웨어 구성 요소 및 컨트롤은
애플리케이션에 새 기능을 추가하는데 사용할 수 있는, 미리 작성 된 소프트웨어 라이브러리입니다.

D3 Ver.4.11.0

홈페이지 바로가기

정의 및 사용 목적

D3.js는 데이터와 이미지를 바인딩하는 라이브러리 입니다. 서버의 수치 데이터를 웹브라우져로 가져온 뒤 이를 브라우져 문서 요소로 변경하고 렌더링합니다. 그렇기 때문에 서버 데이터가 변경되면 웹브라우져는 변경된 요소를 반영하여 다시 그래프를 그리게 됩니다.



사용목적 : D3.js를 이용하면 기존의 정적인 그래프를 데이터와 바인딩된 동적 그래프로 구현 할 수 있습니다. 

설치 방법


깃헙 저장소에서 직접 소스파일을 다운로드 하거나 bower를 이용해 다운로드 할 수 있습니다.


bower install d3 --save


D3.js 소스파일을 다운로드 후 이를 indxe.html 문서에 로딩합니다.


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3.js GetStarted</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>

<!-- D3.js 추가 -->
<script src="../bower_components/d3/d3.min.js"></script>
<script src="app.js"></script>
</body>
</html>


비고

오늘날 인터넷에는 헤아릴수 없는 양의 자료들이 있고 우리는 웹브라우져를 통해 그 공간을 들여다 볼 수 있습니다. 문자열을 통해 이메일을 확인하고 이미지로 사진을 공유할 수 있습니다. 특히 수치로 이뤄진 데이터를 그래프로 보여줄 때는 이미지 파일을 서버에서 제공하게 됩니다. 그러나 한번 만들어 놓은 그래프 이미지는 데이터가 변경될 때마다 변경해야 하는데 이는 매우 수고로운 작업입니다.


D3.js는 데이터와 이미지를 바인딩하는 라이브러리 입니다. 서버의 수치 데이터를 웹브라우져로 가져온 뒤 이를 브라우져 문서 요소로 변경하고 렌더링합니다. 그렇기 때문에 서버 데이터가 변경되면 웹브라우져는 변경된 요소를 반영하여 다시 그래프를 그리게 됩니다. 이렇게 D3.js를 이용하면 기존의 정적인 그래프를 데이터와 바인딩된 동적 그래프로 구현 할 수 있습니다.

이메일 무단 수집 거부

팝업 닫기

본 웹사이트에 게시된 이메일 주소가 전자우편수집 프로그램이나 그밖의 기술적장치를 이용하여 무단으로 수집되는 것을 거부하며, 이를 위반시 정보통신망 이용촉진 및 정보보호등에 관한 법률에 의해 처벌 받을 수 있습니다.

닫기
TOP