FrontendLibraryD3.js

D3.js Axis API

D3.js axis API

차트에서 축은 너무나 자주 사용되므로 축을 생성하는 기능을 d3.js안에 내장 되어있다. 축에서는 눈금을 표현해야하고 적당한 값을 넣어줘야하는 등 복잡한 일이 많다만, 이러한 복잡성을 d3.js가 간단히 처리해준다.
2차원의 차트에서 축이 올 수 있는 자리는 상하좌우이므로 다음과 같은 함수가 제공된다.

axis API

  • d3.axisTop(scale)
  • d3.axisBottom(scale)
  • d3.axisLeft(scale)
  • d3.axisRight(scale)

또한 축을 생성할 때 위에서 설명했던 scale을 넘겨주면 range의 범위를 적절히 판단하여 축을 생성하게 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<svg id="graph" width="100%" height="100%">
    <g id="yaxis"></g> // g태그는 하위 엘리먼트 그룹핑 한다.
    <g id="xaxis"></g>
</svg>

<script>
var resizer = function resizer() {
    var h = document.getElementById('graph').clientHeight;
    var yscale = d3.scaleLinear()
        .domain([0, 4955]) // 실제값의 범위
        .range([h - 20, 0 + 20]); // 변환할 값의 범위(역으로 처리했음!), 위아래 패딩 20을 줬다!
    
    d3.select('#yaxis')
        .attr('transform', 'translate(50, 0)') // 살짝 오른쪽으로 밀고
        .call(d3.axisLeft(yscale)); // 축함수를 넘기면 알아서 그려줌.
};

window.addEventListener('resize', resizer);
resizer();

확인 해 보면 세로축이 그려진걸 볼 수 있다.

axis 세로축

이 그림의 빨간선과 코드를 비교해보죠.

  1. 우선 가로로 50만큼 이동시킨 것은 위의 코드 중에 translate(50, 0) 이 부분 없으면 왼쪽에 가려져 버린다. 거의 숙어처럼 축은 translate와 같이 사용될 운명이다.
  2. 위 아래 20씩 패딩이 성립한 이유는 .range([h – 20, 0 + 20]); 이렇게 위아래 20을 뒀기 때문이다. 반대로 말하자면 축함수는 range의 값을 픽셀크기로 인식하여 그린다는 것을 알 수 있다.

참조

공유하기