좌표 축 을 그리다

좌표 축 을 그리다

//  d3 svg axis()       
var x_axis = d3.svg.axis().scale(scale_x),
    y_axis = d3.svg.axis().scale(scale_y)

g.append("g")
    .call(x_axis)
    

페이지 효 과 는 다음 과 같 습 니 다. 이때 x 축 은 페이지 위 에 있 고 우리 가 원 하 는 위치 에 있 지 않 습 니 다. transform 속성 을 설정 하여 좌표 축 을 원 하 는 위치 로 옮 길 수 있 습 니 다.
그림 y 축

g.append("g")
    .call(y_axis)

효 과 는 다음 과 같 습 니 다. 이때 x 축 은 페이지 의 위 에 있 고 우리 가 원 하 는 위치 에 있 지 않 기 때문에 Y 축 을 회전 시 켜 야 합 니 다.
y 축 회전 코드: orient () 추가
y_axis = d3.svg.axis().scale(scale_y).orient("left")
회전 후의 효과 도 는 다음 과 같다. Y 축의 수 치 는 작 아 지 는 것 이 아니 라 큰 것 에서 작 아 지 는 것 을 발견 할 수 있다. 이것 은 컴퓨터 페이지 에 있 을 때 기하학 적 수학 에서 의 좌표 축 과 방향 이 다 르 기 때문이다.
일반 수학 좌표계:
컴퓨터 화면 좌표계
그래서 회전 한 Y 축 좌표계 의 값 은 작 아 지 는 것 이 아니 라 큰 것 에서 작 아 지 는 것 이다.
그래서 우 리 는 Y 축의 값 범 위 를 바 꾸 어 페이지 의 표시 효 과 를 바 꿀 수 있다.

var scale_y = d3.scale.linear()
    .domain([0, d3.max(data)]) //domain      
    //  .range([0, g_height])   ：
    .range([g_height, 0]) //range（）         

이 두 가지 유형 이 좌표 축 스타일 을 제어 하고 있 는 것 을 발견 하 였 으 며, css 스타일 을 설정 하여 좌표 축 에 눈금 을 더 하 였 다.

.domain,
.tick line {
    stroke: gray;
    stroke-width: 1;
}

여기까지 좌표계 가 끝나 고 ~