📚 Reference

🔖 Index

• scale
• 예시
• domain, range

scale

• scalelinear()
• scaleTime()

예시

const scaleFunc1 = d3.scaleLinear().domain([1, 5]).range([1, 10]);
console.log(scaleFunc1(3)); // 5.5
console.log(scaleFunc1(5)); // 10

• scale 함수의 결과는 또 다시 함수이다.
• 즉 scale 함수는 함수를 만드는 함수이다.
• scale 함수는 domain(), range() 함수와 같이 사용한다.
• scale 함수는 domain() 범위의 입력 값이 들어오면 range 범위의 결과 값으로 바꿔주는 함수를 만들어준다.

const xScale = d3.scaleTime()
      .domain([new Date("2019-03-22T03:00:00"), new Date("2019-03-22T03:25:00")])
      .range([20, 330]);
    
const yScale = d3.scaleLinear()
      .domain([1, 9])
      .range([330, 20]);

• 축을 만들 때, scale들의 range 범위를 사용하기 때문에 위에서 배운 scale 함수를 사용해서 두 개의 함수 (xScale, yScale)를 만들어낸다.
• domain은 데이터의 일반적으로 최소, 최대값으로 설정하고 range는 표출할 범위의 너비, 높이 픽셀값이 된다.