d3 + crossfilter: Date-axis ám thanh pixelthin

Question

Tôi đã dành phần tốt hơn trong ngày cố gắng để có được một biểu đồ Date-axis tốt đẹp, đến mức mà tôi đăng câu hỏi đầu tiên của tôi trên stackoverflow.

Trục và xếp chồng chỉ là cách tôi muốn nó, tuy nhiên các thanh thực sự mỏng cho không (với tôi) lý do rõ ràng. Nói cách khác, tôi thực sự sẽ đánh giá cao một số trợ giúp.

Dưới đây là một phiên bản thu nhỏ (Tôi đang sử dụng thư viện dc.js, tuy nhiên tôi khá tự tin những thách thức là trên d3 + crossfilters thay mặt):

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(); 

Answer 1

Tôi nghĩ vấn đề là thực sự với cách bạn đang sử dụng dc.js; bạn không chỉ định những gì units các barchart phải ở trong Hãy thử điều này:.

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

Answer 2

Đối với bất cứ ai khác có vấn đề này, mà đối với họ câu trả lời của Adam dường như không làm gì cả, chắc chắn rằng bạn không có elasticX đặt thành đúng như tôi đã làm.