[D3.js] d3-interpolate에 대한 공부

codingman (64)in #dclick • 6 years ago (edited)

[D3.js] d3-interpolate에 대한 공부

D3.js 래퍼런스 : https://github.com/zziuni/d3/wiki/API-Reference

오늘은 D3에서 제공되는 보간법에 대해서 살펴 볼까 합니다. 예전에 3D Volume Rendering를 공부 했던 기억이 문득 떠오르네요. 그때 선형 보간법으로 배웠었죠. 두 지점의 평균값을 구하여 선 보간을 수행하고 다시 두 선의 보간값의 평균값을 구해서 평면 보간을 수행하고 다시 두 평균의 평균값의 평균값을 구해서 공간 평균값을 구하는 Ray Casting에서 광선의 현재 위치의 값을 구하여 수백장의 이미지에서 볼륨을 랜더링을 하 수 있습니다. 과거의 기억이 떠올라 간단히 D3로 두 지점에 대한 특정 위치의 보간값을 추출해 보았습니다.

1. d3-interpolate

D3.js 래퍼런스에 보시면 아래와 같이 다양한 보간 함수들을 제공합니다.

전부 다루면 좋겠지만 몇개의 함수만 실행시켜서 보간함수에 대해 느낌만 살펴보도록 하죠.

숫자 보간(d3.interpolateNumber)

<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
  
<script>
var color = d3.interpolateNumber(0, 100);
    console.log(color(0.0)); 
    console.log(color(0.5)); 
    console.log(color(1.0));     
</script>
</body>

interpolateNumber(a,b) : a,b사이의 0~1사이의 보간값을 가져옵니다. 0이면 a값을 1이면 b값이 반환되고 그 사이 값은 특정위치의 보간값을 가져오게 됩니다.

0, 0.5, 1 이렇게 세개의 보간값을 살펴보면 다음과 같은 결과를 얻게 됩니다.

0.5로 세팅해 놓으면 두 지점의 평균 보간값을 가져오게 됩니다. 이걸 이용하면 선형 평균보간값을 가져오고 다시 두 선의 대한 평면 평균보간값을 가져오고 다시 두 평면 평균 보간값을 가져오면 3D 공간의 평균 보간값을 만들어 낼 수 있게 됩니다. 이걸 이용하면 3D 랜더링하는데 활용하는데 응용 할 수 있겠죠

파라미터 보간(d3.interpolate)

<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
  
<script>
 var color = d3.interpolate({color: ["red", "green","blue"]}, {color: ["blue","red", "green"]});

    console.log(color(0.0)); 
    console.log(color(0.5)); 
    console.log(color(1.0));    
</script>
</body>

[결과]

RGB 보간

<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
 
<script>
var color = d3.interpolateRgb("red", "green");
    console.log(color(0.0)); 
    console.log(color(0.5)); 
    console.log(color(1.0));     
</script>
</body>

[결과]

결과를 보시면 red~green에 대한 색 보간이였습니다. RGB에서 RG만 보간한 값이였고 B를 추가로 살펴보면

<body>
<script src="https://d3js.org/d3.v5.min.js"></script>  
<script>
var color = d3.interpolateRgb("red", "blue");
    console.log(color(0.0)); 
    console.log(color(0.5)); 
    console.log(color(1.0));     
</script>
</body>

[결과]

문자열 보간(d3.interpolateString)

<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
  
<script>
  var ch = d3.interpolateString("codingman a0","codingman a10");
    console.log(ch(0)); 
    console.log(ch(0.5)); 
    console.log(ch(1.0));     
</script>
</body>

문자열 보간은 문자열 안에 들어 있는 숫자를 자동으로 보간을 해줍니다. 이 기능이 좀 맘에 드는 함수이더군요.

[결과]

마무리

오늘은 두 지점의 값을 이용하여 특정 위치의 보간값을 구해 보았습니다. 그리고 설명은 굳이 할 필요 없이 실행 시킨 결과만 보시면 쉽게 이해가 되 실 거에요. D3 래퍼런스에 보간 함수 중 몇개만 간단히 post로 작성했는데 나머지 함수는 여러분이 함수명만 바꿔서 돌리시면 아마 간단히 결과를 확인 하실 수 있을 거에요.

이걸 어디다 써먹지 하고 생각하시는 분도 있을 거에요. 제 경우는 예전 3D Volume Rendering 할 때 활용한 원리였었습니다. 지금은 다 까먹었지만요. 그냥 잊었던 추억의 기술 원리를 한번 떠올리면서 실험을 했네요.