D3 : 축을 통과 할 때 축척은 무엇을합니까? 당신이 축을 만들려면 D3에서

Question

, 당신은 같은 것을 할 수 있습니다

x는 스케일 기능입니다

var xAxis = d3.svg.axis() 
.scale(x) 

. x의 도메인은 틱의 시작과 끝 값을 정의한다는 것을 이해합니다. x의 범위가 결과 축을 변경하는 방법을 이해하는 데 문제가 있습니다. 축의 컨텍스트에서 도메인 매핑은 무엇입니까?

Answer 1

데이터 세트를 시각적으로 표현하기 위해해야 ​​할 일에 대해 생각해보십시오. 각 데이터 요소 (예 : 1 백만 달러)를 화면의 한 지점으로 변환해야합니다. 데이터의 최소값이 $ 0이고 최대 값이 $ 1000000 인 도메인은 0에서 1000000입니다. 이제 컴퓨터 화면에서 데이터를 나타내려면 각 데이터 요소 (예 : $ 25)를 여러 픽셀로 변환해야합니다. 간단한 일대일 선형 변환 ($ 25가 화면의 25 픽셀로 변환)을 시도 할 수 있습니다.이 경우 범위는 도메인 = 0 ~ 1000000과 동일합니다. 그러나 이것은 피 묻은 큰 화면을 필요로합니다. 우리가 화면에 얼마나 큰 그래픽을 나타낼 지에 대한 아이디어가있을 가능성이 높으므로 그에 따라 범위를 설정합니다 (예 : 0 ~ 600).

d3 스케일 기능은 데이터 세트의 각 데이터 포인트를 범위 내에서 해당 값으로 변환합니다. 이를 통해 화면에 표시 할 수 있습니다. 앞의 예제는 간단한 변환이므로 d3.scale() 함수는 많은 작업을 수행하지 않지만 데이터 포인트를 시각적 표현으로 변환하는 데 약간의 시간을 투자하고 규모 함수가 많은 작업을 수행하는 몇 가지 상황을 빠르게 발견합니다 너를 위해서.

축의 특별한 경우 축척 함수는 똑같은 일을합니다. 그것은 각각의 '틱 (tick)'을 픽셀로 변환하여 화면에 배치하는 것입니다.