[D3] d3-interpolate (Value interpolation) 사용법

value interpolation은 가장 적합한 일반적인 보간입니다.

 

interpolate(a, b)

a, b 사이의 보간된 값 반환을 합니다. b의 유형에 따라서 보간의 유형이 결정됩니다. 

d3.interpolate("red", "blue")(0.5) // rgb(128, 0, 128)

 

b의 값이 null, undefined, boolean의 값일 경우 b의 값을 그대로 씁니다.

const interpolate = d3.interpolate('red', true)
console.log(interpolate(0.5)) // true 반환

 

interpolateNumber(a, b)

b가 숫자일 경우 a, b 사이의 보간의 값을 반환합니다.

const interpolate = d3.interpolate(10, 5)
console.log(interpolate(0.7)) // b가 기준이기 때문에 6.5

계산법은 다음과 같습니다.

function interpolator(t) {
	return a * (1 - t) + b * t
}

 

interpolateRound(a, b)

두 숫자 a, b 사이의 보간의 값에서 가장 가까운 정수로 반올림 값을 반환합니다. 이 점을 제외하면 interpolateNumber와 유사합니다.

const interpolate = d3.interpolateRound(10, 5)
console.log(interpolate(0.7)) // 7

계산법

function interpolrate(t) {
	return Math.round(a * (1 - t) + b * t)
}

 

interpolateString(a, b)

두 문자 a, b 사이의 보간을 실행하여 새로운 문자열을 생성합니다. a와 b에서 숫자를 찾아내고, 두 숫자를 보간을합니다.

b를 기준으로 하기때문에 a의 문자는 무시됩니다.

const interpolate = d3.interpolateString('300 12px sans-serif', '500 36px Comic-Sans')
console.log(interpolate(0.5)) // 400 24px Comic-Sans

계산법

const s = '500 36px Comic-Sans'
const regexp = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g
var result
while(result = regexp.exec(s)) {
	// result[0]을 이용하여 숫자를 뽑을 수 있습니다.
    // index와 lastIndex를 이용해서 slice를 활용하여 문자를 뽑을 수 있습니다.
}

 

interpolateDate(a, b)

날짜 a, b 사이의 보간을 실행하여 새로운 날짜를 생성합니다. 

const a = new Date('2014-1-1')
const b = new Date('2016-1-1')
const interpolate = d3.interpolateDate(a, b)
console.log(interpolate(0.5)) // 2015-1-1에 해당하는 Date

 

interpolateArray(a, b)

두 배열간의 보간 값을 반환합니다. 내부적으로는 b와 동일한 길이의 배열이 생성됩니다. b의 요소에 a가 있으면 iterpolate를 이용하여 보간값을 생성합니다. 

const a = [0, 1]
const b = [1, 10, 100]
const interpolate = d3.interpolateArray(a, b)
const interpolateArray = interpolate(0.5)
console.log(interpolateArray) // 0.5, 5.5, 100

 

interpolateNumberArray(a, b)

두 숫자 배열간의 숫자 배열 보간값을 반환합니다. slice를 이용한 복사가 이뤄져서 참조형 복사에서는 수정에 인한 영향이 있을 수 있습니다.

const a = Float32Array.of(0,1)
const b = Float64Array.of(1,3,5)
const interpolate = d3.interpolateNumberArray(a, b)
const interpolateArray = interpolate(0.5)
console.log(interpolateArray)

 

interpolateObject(a, b)

두 객체 사이의 보간값을 반환합니다. b의 객체 속성과 동일한 속성을 갖는 객체가 생성됩니다. a 객체에서 동일한 속성이 존재한다면 interpolate를 이용하여 두 사이의 보간값을 추출합니다. 

const a = {x:0, y:1},
	  b = {x:1, y:10, z:100}
const interpolate = d3.interpolateObject(a, b)
const result = interpolate(0.5)
console.log(result) // {x: 0.5, y: 5.5, z: 100}

 

interpolateBasis(values)

값 배열을 통한 균일한 B-스플라인 보간값을 반환합니다. 해당 배열은 숫자여야 합니다. 반환된 값은 B-스플라인에서 부드러운 곡선에 제어점으로 사용됩니다. 

const v = [0, 1, 5, 7, 10]
const interpolate = d3.interpolateBasis(v)
const result = interpolate(0.8)
console.log(result) // 7.685333

 

interpolateBasisClosed(values)

제어점을 반복하여 B-스플라인 보간값을 생성합니다. 스플라인이 닫힌 경계에서도 매끄러운 연결이 되도록 합니다.

const v = [0, 1, 5, 7, 10]
const interpolate = d3.interpolateBasisClosed(v)
const result = interpolate(0.8)
console.log(result) // 7.83333

 

interpolateDiscreate(values)

이산 보간값을 생성할때 사용됩니다. 

const v = [0, 1, 5, 7, 10]
const interpolate = d3.interpolateDiscrete(v)
const result = interpolate(0.8)
console.log(result) // 10

 

quantize(interpolator, n)

interpolator에서 균일 가격의 샘플 n개를 반환합니다.

const interpolate = d3.interpolate(0, 10)
const result = d3.quantize(interpolate, 3)
console.log(result) // [0, 5, 10]

 

pricewise(interpolator, values)

values에 있는 시작과 끝 값을 고려하여 해당 보간값을 n개의 값으로 확장합니다.

const result = d3.piecewise(d3.interpolate, [100, 1000])
console.log(result(0.8)) //820