2013-12-10 2 views
0

시계열 막대 차트 폭 dc, crossfilter 및 d3을 렌더링하려고합니다. JSON 데이터는 다음과 같이 2010 년 1989 이동과 같습니다시계열 막대 차트 사용시 X 축 레이블이 잘못됨

[{ 
    year: 1999, 
    events: 40 
},{ 
    year: 1996, 
    events: 25 
}, 
... 
] 

을 렌더링하기 위해서 나는 다음과 같은 코드를 가지고 : 작품의

var volumeChart = dc.barChart("#yearly-chart"); 
var ndx = crossfilter(data); 
var yearDim = ndx.dimension(function(d) { 
    return d.year; 
}); 

var countPerYear = yearDim.group().reduceSum(function(d) {return d.events;}); 

volumeChart 
    .width(700) 
    .height(200) 
    .margins({top: 50, right: 50, bottom: 20, left: 40}) 
    .dimension(yearDim) 
    .group(countPerYear2) 
    .elasticY(true) 
    .x(d3.time.scale().domain([1989, 2011])) 

volumeChart.render() 

이런 종류의,하지만 X에서 올해의 레이블을 축이 이상하게 엉망이됩니다

Graph with wrong X axis-labels

내가 좋아하는 x 축을 결정하는 Date 객체를 사용하는 경우 :

x(d3.time.scale().domain([new Date(1989, 1, 1), new Date(2010, 12, 31)])) 

그래프에 데이터가 표시되지 않지만 적절한 방법이어야합니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

+1

실제로 Date 객체가 가장 좋은 방법이지만 JSON의 날짜를 이러한 객체로 파싱해야합니다. 따라서 데이터를로드하는 모든 곳에서 날짜를 파싱합니다. –

+0

그것이 그 것이 었습니다. 그것은 많은 의미가 있습니다. 이것을 올바른 것으로 표시 할 수 있도록 답변을 작성하십시오. – GiantSquid

+0

물론 가능합니다. 감사합니다. –

답변

1

실제로 Date 객체가 가장 좋은 방법이지만, JSON의 날짜를 이러한 객체로 파싱해야합니다. 따라서 데이터를로드하는 모든 곳에서 날짜를 파싱합니다.