축의 다른 값을 D3의 축척 함수에서 찾은 값과 다르게 표시합니다.

Question

x 축에 선형 눈금을 사용하는 d3 그래프가 있습니다. 다음과 같이 보입니다 :

... 
y | 
    | 
    +------------------------------------------- 
    0.0 0.5 1.0 1.5 2.0 2.5 3.0 
        Time in weeks 

x 축에 정렬 된 데이터 행을 표시하려고합니다. 이 데이터를 사용하여

23 23   22     19 

:이 같은 nums가 Time in weeks X 축에 가을해야하는 위치

var nums = [23, 23, 22, 19]; 
var times = [0, 0.5, 1.5, 3]; 

times

입니다. 따라서 nums의 첫 번째 인덱스는 0.0이고 두 번째 인덱스는 0.5입니다.

var x = d3.scale.linear().domain([0,3]).range([0, 600]); 

그래서 x(0.5) 새로운 축에 눈금을 표시하기위한 올바른 범위 값을 반환

스케일 기능은 다음과 같이 보입니다. 하지만 표시하고자하는 것은 nums 배열의 해당 값입니다. 즉, nums[times.indexOf(0.5)]의 값을 표시합니다.

여전히 입력 영역으로서 times을 사용하면서 nums 값 대신 times 값이 표시되도록 d3.svg.axis() 의해 사용되는 scale()을 대체하는 방법이 있는가?

편집

Here is a demo

편집 2

나는 ne8il의 대답 덕분에 그것을 알아 냈다. 답은 완전한 아니었지만,이 코드의 기초가 형성 :이 경우에 생각

var x1Axis = d3.svg.axis() 
     .scale(x1) 
     .ticks(nums) 
     .tickValues(times) 
     .tickFormat(function(x){return nums[times.indexOf(x)];}) 

Working example

Answer 1

당신이

d3.svg.axis().ticks(times).tickValues(nums); 

을 수행 할 수 있습니다 그것은으로 각각의 시간을 '통과됩니다 스케일 함수를 x 좌표에 맵핑하고 'nums'에 해당 인덱스 값을 사용하여 텍스트를 출력하십시오. Source is here