[D3] Linear-scales(선형 스케일) 사용법

선형 스케일은 연속적인 숫자 데이터를 다른 연속적인 숫자 범위로 선형 변환하여 매핑합니다. 이 변환은 비례 관계를 유지하며, 숫자로 된 범위는 역으로 변환할 수도 있습니다. 선형 스케일은 비례적인 차이를 잘 보존하므로 연속적인 숫자 데이터를 다룰 때 사용하기 편리합니다.

scaleLinear(domain, range)

선형 스케일을 만들 때, 지정된 도메인 및 범위로 설정합니다. 도메인이나 범위를 지정하지 않으면 기본값은 [0,1]입니다.

const linear = d3.scaleLinear([0, 100], [10, 1000])

linear(value)

도메인의 값이 주어지면 범위에서 해당하는 값을 찾아 반환합니다. 

const linear = d3.scaleLinear([0,100],[10,1000])
linear(50) // 505

linear.invert(value)

범위의 값이 주어지면 도메인에서 해당 값을 반환합니다. invert는 linear 위 마우스 위치에 해당하는 데이터 값을 결정하는 데 사용됩니다.  범위가 숫자인 경우에만 지원됩니다. 숫자가 아닌 경우 NaN을 반환합니다. 

const linear = d3.scaleLinear([0, 100], [10,1000])
linear.invert(505) // 50

linear.domain(domain)

도메인이 지정된 경우 도메인을 지정된 숫자 배열로 설정하고 스케일을 반환합니다. 배열의 요소가 숫자가 아닌 경우 숫자로 강제 변환됩니다.  일반저긍로 도메인과 범위에 두 개의 값을 가지지만, 두 개 이상의 값을 지정하여 부분별 스케일을 생성할 수 있습니다.

const linear = d3.scaleLinear([-1,0,1],['red','white','green'])

부분별 스케일은 주어진 도메인 값에 해당하는 범위를 찾기위해 이진 검색을 수행합니다. 따라서 도메인은 정렬되어야 합니다. 도메인과 범위의 길이가 다를 경우 짧은 배열의 길이에 맞춰 설정됩니다.

도메인을 지정하지 않으면 현재 도메인을 반환합니다.

linear.domain() // [-1,0,1]

linear.range(range)

범위가 지정된 경우 스케일의 범위를 지정된 값으로 설정하고 반환합니다. 도메인과 달리 배열의 요소가 숫자일 필요는 없습니다. invert에는 숫자 범위가 필요합니다.

범위가 지정되지 않으면 현재 범위를 반환합니다.

linear.range()

linear.rangeRound(range)

스케일의 출력 범위를 설정하고 결과 값을 반올림하여 정수로 만듭니다. d3.interpolateRound 보간기를 사용하여 결과 값이 반올림 되도록 설정합니다.

const linear = d3.scaleLinear().rangeRound([0,960])

위 선형 스케일에서 0에서 960 사이의 정수로 매핑합니다. 밑에 코드와 동일합니다.

linear.range(range).interpolate(d3.interpolateRound)

linear.clamp(clamp)

클램핑이 비활성화된 상태이면 내부의 값이 아닌 외부의 값을 반환할 수 있습니다. 하지만 클램핑이 활성화되면 내부의 값 범위 내에 반환됩니다. 기본 값은 false입니다.

const linear = d3.scaleLinear([10,130],[0,960])
linear(-10) // -160, outside range
linear.invert(-160) // -10, outside domain
linear.clamp(true)
linear(-10) // 0
linear.invert(-160) // 10

clamp에 값이 없으면 현재 활성 상태를 반환합니다.

linear.unknown(value)

NaN 및 undefined 입력 값에 대한 스케일의 출력 값을 설정 후 반환합니다. 누락되거나 잘못된 데이터를 표시하는 데 유용합니다.

const linear = d3.scaleLinear([0, 100], [10,1000]).unknown(0)
linear('h') // 0

unknown에 값이 없으면 설정된 값을 반환하며 기본값은 undefined입니다.

linear.interpolate(interpolate)

스켈일의 보간기 팩토리를 설정하여 범위 내 정의된 사이의 값이 보간되는 방법을 결정합니다. 기본값은 d3.interpolate입니다.

const color = d3.scaleLinear(["red", "blue"]).interpolate(d3.interpolateHcl);

위에는 red와 blue 사이를 보간하는 색상 스케일을 설정합니다.

const color = d3.scaleLinear([-100, 0, +100], ["red", "white", "green"]);

위와 같이 3개의 요소가 있을 떄 두 개의 보간기를 생성합니다.

const i0 = d3.interpolate("red", "white");
const i1 = d3.interpolate("white", "green");

범위 값이 객체인 경우 보간기는 객체를 수정합니다.

linear.ticks(count)

스케일 영역에서 대표적인 값을 count만큼 반환합니다. 반환된 ticks 값은 균일한 간격을 가지며 도메인 범위 내에 있음이 보장됩니다. 기본값은 10입니다. 눈금 표시를 위해 사용됩니다. 도메인에 따라 더 많은 tick과 더 적은 tick을 반환할 수 있습니다.

const x = d3.scaleLinear([10, 100], ["red", "blue"]);
x.ticks(); // [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

linear.tickFormat(count, specifier)

눈금 값을 표시하는 데 적합한 숫자 형식 함수를 반환합니다. 눈금 값 사이의 고정 간격에 따라 적절한 정밀도를 자동으로 계산합니다. 그리고 specifier를 사용하여 맞춤 형식을 지정할 수 있습니다.

const x = d3.scaleLinear([-1, 1], [0, 960]);
const T = x.ticks(5); // [-1, -0.5, 0, 0.5, 1]
const f = x.tickFormat(5, "+%");
console.log(T.map(f)); // ["−100%", "−50%", "+0%", "+50%", "+100%"]

linear.nice(count)

도메인의 시작과 끝을 보기 좋게 반올림된 값으로 확장합니다. 계산된 도메인이 불규칙할 때 유용합니다.

const x = d3.scaleLinear([0.241079, 0.969679], [0, 960]).nice();
console.log(x.domain()); // [0.2, 1]

count를 지정하여 단계 크기를 설정할 수 있습니다. 반환된 눈금 값이 정확히 도메인을 커버하도록 합니다.

const x = d3.scaleLinear([0.241079, 0.969679], [0, 960]).nice(40);
console.log(x.domain()); // [0.24, 0.98]

새로운 도메인이 설정되면 다시 nice()를 호출해야합니다.

linear.copy()

스케일을 복사합니다.

tickFormat(start, stop, count, specifier)

눈금값을 표시하는데 필요한 형식 함수를 반환합니다. start 와 stop은 데이터의 시작과 끝을 나타내며 count는 눈금의 수를 나타냅니다. specifier를 이용하여 형식을 지정할 수 있습니다.

scaleIdentity(range)

지정된 범위로 새로운 identity 스케일을 생성합니다. identity 스케일은 도메인과 범위가 동일한 선형 스케일입니다.

const x = d3.scaleIdentity([0, 960]);

도메인과 범위가 0에서 960인 스케일입니다. invert는 항등 함수입니다. identity 스케일은 rangeRound, clamp, interpolate와 같은 기능을 지원하지 않습니다. 범위가 지정되지 않으면 [0,1]입니다.

scaleRadial(domain, range)

지정된 도메인과 범위로 radial 스케일을 생성합니다. radial 스케일은 범위가 내부적으로 제곱되어 입력 값이 제곱된 출력 값에 선형적으로 대응되는 스케일입니다. interpolate를 지원하지 않습니다. 범위가 지정되지 않으면 [0,1]입니다.

const r = d3.scaleRadial([100, 200], [0, 480]);
console.log(r(100)) //0
console.log(r(101)) //48