FrontendLibraryD3.js

D3.js Scale 집중탐구

D3.js Scale 집중탐구 - 1

기본적으로 scale을 그리는 이미지의 크기와 컬러를 자동으로 조정하느 기능을 담당한다. 읽어온 데이터값을 건들지 않고 그 데이터값에 맞는 크기와 컬러 범위를 시각화 할때 자동으로 맞춰준다.

  • d3.scaleLinear()
  • d3.scalePow()
  • d3.scaleLog()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var linear = d3.scaleLinear().domain([1, 10]).range([0 ,100]); // x: y = mx + b
var pow = d3.scalePow().domain([1, 10]).range([0 ,100]); // x: y = mx^k + b
var log = d3.scaleLog().domain([1, 10]).range([0 ,100]); // x: y = m log(x) + b

console.log('d3.scaleLinear()');
data.forEach(function(d) {
    console.log( linear(d) );
});

console.log('d3.scalePower()');
data.forEach(function(d) {
    console.log( pow(d) );
});

console.log('d3.scaleLog()');
data.forEach(function(d) {
    console.log( log(d) );
});

결과를 확인해 보면 scaleLinear() 와 scalePow() 메소드의 결과값은 같은 값이 출력 되지만 scaleLog() 메소드는 다른값이 출력이 된다.

d3.scaleLinear() : 두 지점 사이의 값 x에 대해 y는 mx + b 값이 리턴된다.
공식 => x: y = mx + b

1
var linear = d3.scaleLinear().domain([1, 10]).range([0 ,100]);

도메인 [110]에 대한 반환값으로 [0100]사이의 값이 선택이 된다.

1
2
3
4
console.log( linear(2) );
console.log( linear.invert(20) ); //역값
console.log( linear(-1) );
console.log( linear(11) );

linear(2) => 11.11111111111111
linear.invert(20) => 2.8 // range y값 20이 대응하는 도메인 x값을 출력(반환값에서 도메인값을 역으로 찾는 메소드)

invert() : range 값의 대한 역 도메인 값을 반환

linear(-1) => -22.22222222222222
linear(11) => 111.11111111111111
=> 도메인 범위를 벗어나도 현재 스케일 함수에 맞게 자동으로 -1과 11이 갖는 반환값을 계산해내서 출력

linear.clamp(true); // range 범위를 고정시킨다.
console.log( linear(-1) );
console.log( linear(11) );

linear(-1) => 0
linear(11) => 100
=> clamp 함수가 true로 선언하게 되면 도메인값이 벗어나더라도 자동으로 계산하느넥 아니라 range값을 벗어나지 못하게 된다. 아무리 작은 값이라도 0으로 아무리 큰 값이라도 100으로 묶여 버린다.

clamp() : range 값의 범위를 고정

1
2
3
4
5
6
var linear = d3.scaleLinear().domain([1, 10]).rangeRound([0, 100]) // 정수값으로 출력

range()일 경우 linear(2) -> 11.11111111111111 값이 출력 되는 반면
rangeRound()일 경우에는 linear(2) => 11 출력 

rangeRound() : 반환값을 정수형으로 출력

참조

공유하기