이렇게, I 값의 배열이 데이터를

Question

일자로 배열 인덱스로부터 X 축 변환 D3 :

[244, 13, 24, 0, 18, 24, 3, 4, ... ] 

배열 인덱스가이 데이터가 날짜 등의 범위를 나타내며, 단지 정수이지만 0 번째 색인은 06/04/2013을 나타내고 마지막 색인은 09/30/2013을 나타내며 실제로는 1970 년 이래로 초 단위입니다. 따라서 1370378409 및 1380575923이 더 정확합니다.

x 축에 배열 인덱스가 나타내는 날짜를 표시하고 싶습니다. 따라서 진드기는 날짜와 같습니다. Mon 08, Tue 09 등등. 데이터가 변하기 때문에 진드기가 앞으로 나올지를 알 수 없습니다. 내가 알고있는 끝점에서 계산할 수 있기를 바랍니다.

이론적으로는 x 축 (차트 너비)의 도메인을 배열에 표시된 날짜 범위로 변환 할 수 있다고 생각합니다. 이런 식으로 (하지만이 공식에서 작동하지 않았다) :

var xAsTime = d3.time.scale() 
       .domain([0, width]) 
       .range([startDate, endDate]) 

이는 정수에서 날짜로 올바르게 변환되어야한다.

Answer 1

D3는 특히이 목적을 위해 시간 스케일이 내장되어 :

https://github.com/mbostock/d3/wiki/Time-Scales

Answer 2

는 X 기능은 일반적으로 자주 차트의 폭 필요한 범위 데이터 도메인에서 확장 할 수 있습니다. 이것은 많은 예제에서 물건을 찾을 수있는 방법입니다.

일반적으로 축을 만들려면 x3 함수를 d3.svg.axis()에 전달해야합니다. 그러나 x 함수의 주요 작업은 종종 내 경우 막대 차트의 막대를 만드는 것입니다. 나는이 막대 차트에서 사용하고

내 자신의 X 기능 :

var x = d3.scale.ordinal() 
      .rangeRoundBands([0, width], .1); 

그리고 또 다른 한개 JSFiddle로 :

var x = d3.scale.linear() 
      .domain([0, data.length]) 
      .rangeRound([0, width]); 

여기에 하나 MBostock에서의

var x = d3.time.scale() 
      .domain([new Date(data[0].date), 
        d3.time.day.offset(new Date(data[data.length - 1].date), 1)]) 
      .rangeRound([0, width - margin.left - margin.right]); 

d3 척도의 힘과 단순함을 사용하여, 나는이 문제를 conve 그래서 같은 별도의 X 기능, xAsTime와 날짜에 배열 인덱스에서 rting :

내 질문 사항에 따라

var xAsTime = d3.time.scale() 
        .domain([this.start * 1000, this.end * 1000]) 
        .range([0, width]) 

var xAxis = d3.svg.axis() 
       .scale(xAsTime) 
       .tickSize(-height) 
       .tickPadding(3); 

, 유일한 변화는 도메인과 범위를 전환했다. 세부 사항을 확신 할 수는 없지만 규모의 영역이 틱으로 표시되는 것 같습니다.