FrontendLibraryD3.js

D3.js ScaleTime

D3.js scaleTime

기초적인 축에 더해 이번엔 날짜를 값으로 하는 가로축을 생성해보자.
이 경우 domain의 범위는 Date객체가 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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)); // 축함수를 넘기면 알아서 그려줌.
        
    var w = document.getElementById('graph').clientWidth;
    var xscale = d3.scaleTime()
        .domain([new Date(2017, 2, 26), new Date(2017, 2, 28)]) //범위를 날짜로
        .range([50, w - 50]); //위의 y축이 가로50을 차지했으니 그만큼 밀자
    var xaxis = d3.axisTop(xscale)
        .tickFormat(d3.timeFormat('%m/%d')) //표시할 형태를 포메팅한다.
        .ticks(d3.timeDay); //틱단위를 1일로

    d3.select('#xaxis')
        .attr('transform', 'translate(0,20)')//세로20만큼 내려서 전개
        .call(d3.axisTop(xscale));
};

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

그럼 전체적으로 아래와 같은 화면을 보게 된다.

axis 가로축

새삼스러운 얘기지만 화면에서의 위치를 잘 잡기 위해서 range에 padding을 넣는다던가 translate를 잘 사용해야 하는 부분은 귀찮기도 하고 반복적이기도 해서 d3가 내장할 레벨은 아니지만 실무적으로는 이를 래핑한 함수를 사용하는 경우가 대부분 이다.

scale은 단지 axis에만 사용되는게 아니라 모든 데이터에 다 적용됩니다(당연하게도) 흐름을 보면

  1. 차트용 데이터가 주어지면
  2. 화면의 크기, 표현하려는 형태 등을 고려하여 scale을 설정하고
  3. scale을 바탕으로 한 axis를 만들어내며
  4. 각 데이터를 scale로 변환해가면서 차트를 그려나간다

라는 식이다.

참조

공유하기