2013-06-03 5 views
10

좋은 하루 축 히스토그램을 얻으려는 데 더 많은 시간을 보냈는데, 내 첫 번째 질문을 stackoverflow에 게시하고 있습니다.d3 + crossfilter : Date-axis는 pixelthin 막대를 렌더링합니다.

bars are too thin

축과 스태킹 그러나 막대가 뚜렷한 이유 (나에게) 아무 정말 얇고, 내가 원하는 방식입니다. 다른 말로하면, 나는 정말로 도움이 될 것입니다.

var jsonstr = [{"timestamp": "2013-06-13T11:04:24.729Z"},{"timestamp": "2013-06-17T11:03:24.729Z"},{"timestamp": "2013-06-17T11:02:24.729Z"},{"timestamp": "2013-06-19T11:02:14.129Z"}]; 

var ndx = crossfilter(jsonstr); 

var timestampD = ndx.dimension(function (d) { 
    return new Date(d.timestamp); 
}); 

var timestampDG = timestampD.group(function (d) { 
    return d3.time.day(d); 
}); 

var barChart = dc.barChart("#dc-bar"); 
barChart.width(500) 
    .height(250) 
    .dimension(timestampD) 
    .group(timestampDG) 
    .x(d3.time.scale().domain([(new Date(2013,05,12)), (new Date(2013,05,20))]).nice(d3.time.day)) 
    .xAxis().tickFormat(function (x) { 
     return x.getDate() + "/" + (x.getMonth()+1); 
    }); 

dc.renderAll(); 

답변

13

나는 문제가 어떻게 함께 실제로 생각 : 여기

는 최소화 된 버전 (I 그러나 나는 도전 D3 + crossfilters 대신 꽤 확신의 dc.js를 라이브러리를 사용하고 있습니다)입니다 당신은 dc.js를 사용하고 있습니다; 당신은에 있어야 막대 그래프를 units을 지정하지 않는이 시도해보십시오. 다른 사람이 문제가있는 사람들을위한

barChart 
    .width(500) 
    .height(250) 
    .dimension(timestampD) 
    .xUnits(d3.time.days) 
    .ect 
+0

잘 찾아 냈습니다. 그것은 트릭을했다. 고마워요! –

+2

나는 지난 달이 문제로 좌절 한 ~ 5 시간을 보냈다. 기쁘게 생각합니다. 다른 사람들에게 고통을 덜어 주어 기쁩니다. –

1

, 누구를 위해 아담의 대답은 아무것도하지 않는 것, 당신이 elasticX이없는 확인 내가 한 것처럼 사실로 설정하십시오.

+1

감사합니다. 나는 나의 시간 척도 (아무 것도 나타나지 않을 것이다)와 고투하고 있었다. 단지 당신의 코멘트를 가로 질러 왔던 ultil. –