척도와 축

선형 척도

• f(x) 함수처럼 x값을 넣었을 때 f(x) 결과값을 반환하는 것.

• 그래프를 그리면 직선의 형태를 띔.

domain과 range

"입력 데이터가 0이면 화면에 0으로 보여지면 좋겠고, 데이터 중 가장 큰 값이 입력되면 화면에 최대 너비가 100으로 나왔으면 좋겠다."

const x = d3.scaleLinear();
x.domain([0, 10]);
x.range([0, 100]);

console.log(x(0)); //10
console.log(x(10)); //100

• domain([domain]) - 입력 데이터, 데이터 값을 기반으로 최소(0)-최대값을 가짐. [domain]은 숫자 배열. 배열 내 요소는 2개 이상.

• range([range]) - 출력 데이터, 보여주고 싶은 최소-최대값. [range]는 숫자, interpolator(색상, 문자 등) 배열. 배열 내 요소는 2개 이상.

순서형 척도 & 묶음 척도

순서형 척도(scaleOrdinal)

• domain에 정의된 배열이 range 배열과 동일한 인덱스로 요소가 배핑됨.

묶음 척도(scaleBand)

• 균일한 range로 밴드를 나눔.

• bandWidth()로 계산한 구간너비를 알 수 있음.

영역과 여백

• svg와 g태그를 분리하여 간격을 지정함.

• 차트를 그릴 때 svg그룹을 기준으로 차트를 추가함.

• margin 영역에는 차트의 부가적인 정보를 기입함.

x축, y축

• 대표적으로 axisTops, axisRight, axisBottom, axisLeft가 있음.

키워드

• scaleLinear

• scaleOrdinal

• scaleBand

• domain

• range

• axisTop, axisBottom, axistLeft, axisRight

• ticks

• tickFormat