[D3] D3를 이용하여 Linear Gauge 그래프 만들기(v4).

D3.js

웹 브라우저 상에서 데이터 정보를 시각화 하기 위해 사용하는 자바스크립트 라이브러리 입니다. 그래프(차트)를 자동으로 그려주는 라이브러리들이 아주 많이 있지만 D3의 경우 개발자의 입맛에 딱 맞게 그릴수 있는 장점을 갖고 있습니다.

보통의 그래프 라이브러리의 경우 딱 짜여진 틀안에 데이터를 표시 할 수 밖에 없었다면 D3의 경우에는 그래프를 그릴수 있는 기능만을 제공하며 이를 이용해서 그리는 것은 사용자의 몫입니다.

물론 손이 아주 더 많이 가는 것은 사실이지만 현재 인터넷에는 D3로 구현된 그래프들이 아주 많이 널려 있기 때문에 그것들을 가져다가 조금만 수정해서 사용한다면 좀 더 자기 입맛에 맞는 그래프를 그릴 수 있습니다.

D3 Linear Gauge Chart

아래의 그래프는 D3 v4 라이브러리를 사용하였고 반응형으로 구현해보았습니다.

사용방법

1. javascript 파일 추가하기

먼저 D3.js 파일과 그래프를 그리는 js 파일을 추가 하셔야겠죠? 맨 아래 "Javascript"섹션에 보시면 소스코드가 있습니다.

2. 그래프를 표시할 Dom 만들기

Linear Gauge 그래프를 표시할 dom을 만들어주세요.

<div id="d3-graph"></div>

3. d3LinearGaugeChart 함수 호출하기

d3LinearGaugeChart('d3-graph', 68, {height: 30});

- d3LinearGauge( 'dom 아이디', '수치(1-100)', '옵션' )

- 옵션

{
    height: 30,            // 그래프의 높이 사지으
    leftText: '안전',      // 그래프 왼쪽 텍스트
    rightText: '위험'     // 그래프 오른쪽 텍스트
}

Javascript

이상 D3 Linear Gauge 차트입니다.