스케일(Scale)
차트에 척도를 적용하고자 할 때 사용하는 기능
-
직접 값을 계산하고,
transform scale()을 사용해서 위치를 변경하는 번거로움을 덜어준다. -
domain([domain])과range([range])메서드를 이용해 값을 대응해서 자동으로 비율을 설정할 수 있다. -
Scale메서드의 실행 결과는 함수를 반환하며, 반환된 함수에 값을 넣어서(domain의 범위) 호출하면range에 대응되어있는 값이 반환된다.
스케일 종류
scaleLinear
d3.scaleLinear([[domain, ]range])
-
연속된 정량적 데이터에 가장 많이 사용하는 선형 스케일
-
인수로
domain, range배열을 넘겨줄 수 있으며,.domain(), .range()메서드로 체이닝을 통해서 지정할 수도 있다. -
domain, range를 지정하지 않으면 기본적으로[0, 1]이 할당된다.
scaleOrdinal
d3.scaleOrdinal([[domain, ]range])
-
정성적 데이터에 사용하는 순서형 스케일
-
domain과range배열의index를 기준으로 요소가 매핑된다. -
domain, range를 지정하지 않으면 기본적으로 빈 배열이 할당된다. -
range배열이 빈 배열이면, 실행 결과는 항상undefined를 반환한다.
scaleBand
d3.scaleBand([[domain, ]range])
-
균일한
band로range를 나누는 스케일 -
반환된 함수에
domain값을 넣어 호출하면,band의 시작 지점을 반환한다. -
band.bandwidht()메서드를 통해band의 길이를 가져올 수 있다. -
domain과range는 기본적으로 각각 빈 배열과[0, 1]이 할당된다.
이 외에도 다양한 종류의 scale과 메서드가 존재한다. d3-scale을 참고하자!
Axis(축)
스케일을 기반으로 차트의 축을 생성하고, 눈금을 시각화 하기 위해 사용하는 기능
-
d3.axisTop(scale), d3.axisLeft(scale) ...등 상,하,좌,우 중 특정 위치에 축을 생성할 수 있다. -
생성된 축에
ticks(count)메서드로 눈금의 갯수를 지정하며,tickFormat([format])메서드에format함수를 전달해서 눈금의 형식을 설정할 수 있다. -
축을 생성한 뒤에는
selection.call(axis)메서드를 통해 적용할 수 있다.
이 외에도 축을 설정하는 다양한 메서드가 있다. d3-axis를 참고하자!
참고 자료
