D3 축 원점 변경

Question

나는 또한 원점 변화처럼 보일 (상단 왼쪽 I 가정)

을 D3S 축 객체가 원점 위치를 받아가 고정되는 위치 방법에 조금 혼란 스러워요 범위 예를 들면, 연관된 크기의 범위에 따라, 아래의 두 개의 축이 서로 다른 위치에서 시작할 것이다

1 축

//Xscale with scale not augmented  
    var stageXScale=d3.scaleLinear()    
     .domain([0,150]) 
     .range([0,150]); 

    var stageXAxis = d3.axisBottom(stageXScale) //unaug axis 
     .ticks(20); 

번째 축

//scale which is augmented 
    var stageXScaleAug=d3.scaleLinear()    
     .domain([0,stageWidth]) 
     .range([0+stageMarginLeft,150+stageMarginLeft]); 

    var stageXAxisAug = d3.axisBottom(stageXScaleAug)  //aug axis 
     .ticks(20); 

축의 원점이 부모 컨테이너의 원점에 매핑되지 않았습니까? 그렇다면 왜 축의 축척이 이것을 바꿉니 까? 여기 JS 바이올린 예이다

https://jsfiddle.net/Snedden27/3wsx8bdy/12/

Answer 1

스케일 범위의 최소 값에 의해 결정되는 축 (종래에 transform)의 원점의 위치.

축 1의 경우 범위는 [0,150]이고 축은 부모 요소의 화면 x 좌표 0에서 시작합니다. 축이 x 좌표 150에서 끝납니다.

축 2의 경우 범위는 부모 요소의 화면 x 좌표 stageMarginLeft (20)에서 축이 시작되도록 [0+stageMarginLeft,150+stageMarginLeft]입니다.