[D3] Time-scales 사용법

시간 영역을 갖는 스케일입니다. 영역의 값은 숫자가 아닌 날짜로 강제 변환되고 invert도 날짜를 반환합니다. time 스케일은 달력 간격을 기반으로 틱을 구현하여 시간 영역에 대한 축 생성의 어려움을 덜어줍니다.

scaleTime(domain, range)

지정된 도메인과 범위를 가진 새로운 시간 스케일을 생성합니다. 도메인을 지정하지 않으면 [2000-01-01,2000-01-02]입니다. 범위의 기본값은 [0,1]입니다.

const x = d3.scaleTime([new Date(2000, 0, 1), new Date(2000, 0, 2)], [0, 960]);
x(new Date(2000, 0, 1, 5)); // 200
x.invert(200); // date 값

scaleUtc(domain, range)

scaleTime과 동일하지만 반환된 시간이 UTC로 작동합니다. 

time.ticks(count)

도메인에서 대표적인 날짜들을 반환합니다. 균일한 간격을 두고 반환합니다.

const x = d3.scaleTime();
x.ticks(10);

위와 같이 10개의 대표적인 날짜를 반환합니다.

count를 지정하여 눈금의 개수를 조절할 수 있습니다.

자동으로 생성되는 시간 간격

• 초 간격 - 1, 5, 15, 30초
• 분 가격 - 1, 5, 15, 30분
• 시간 가격 - 1, 3, 6, 12시간
• 일 간격 - 1, 2일
• 주 간격 - 1주
• 월 간격 - 1, 3개월
• 년 간격 - 1년

interval.every를 이용하여 시간 간격을 명시적으로 지정할 수 있습니다.

const x = d3.scaleUtc().domain([new Date("2000-01-01T00:00Z"), new Date("2000-01-01T02:00Z")]);
x.ticks(d3.utcMinute.every(15));

time.tickFormat(count, specifier)

눈금 값을 표시하는 데 필요한 시간 형식 함수를 반환합니다.

count 매개변수는 무시되지만 linear.tickFormat과 일관성을 유지하기 위해 허용됩니다. specifier를 통해 포맷을 지정할 수 있습니다.

• %Y : 연도 형식(2011)
• %B : 월 형식(February)
• %b %d : 주 형식(Feb 06)
• %a %d : 일 형식(Mon 07)
• %I %p : 시간 형식(01 AM)
• %I:%M : 분 형식(01:23)
• :%S : 초 형식(45)
• .%L : 밀리초 형식(012)

time.nice(count)

도메인을 시작과 끝이 적절하게 보기 좋은 값으로 만듭니다.

const x = d3.scaleUtc().domain([new Date("2000-01-01T12:34Z"), new Date("2000-01-01T12:59Z")]).nice();
x.domain(); // [2000-01-01T12:30Z, 2000-01-01T13:00Z]

count를 이용하여 더 세밀하게 할 수 있습니다. interval.every를 이용하여 시간 간격을 명시적으로 지정할 수 있습니다.