Making bar widths and gaps consistent in dc.js when using a large dataset and d3.scale.linear()

Question

When creating a barchart using dc.js and a smaller dataset, I can get the bars and gaps to look pretty consistent.

When using a larger dataset and d3.scale.linear(), I haven't been able to get the bars and gaps to look anywhere as nice as when using a Date chart and d3.time.scale().

The bars are either too thin or thick without a gap - http://neil-s.com/unison/crossfilter/test/Crossfilter.jpg

Here is some sample code for one of the top bar charts from my image above:

var tempDim = xFilter.dimension(function(d) {return d.temp;}); 
var tempCount = tempDim.group().reduceCount(function(d) {return d.temp;}); 
var minTemp = tempDim.bottom(1)[0].temp;
var maxTemp = tempDim.top(1)[0].temp;   

tempBarChart    
        .width(375).height(157)         
        .dimension(tempDim) 
        .group(tempCount)       
        .x(d3.scale.linear().domain([minTemp, maxTemp]))    
        .centerBar(true)
        .elasticX(true)
        .gap(15) 
        .xUnits(function(){return 15;}) 
        .xAxis().ticks(6)

I've experimented with the gap, xUnits, and ticks values, but no luck. Any suggestions?

Answer 1

Not pretty!

This is a known bug with dc.js.

https://github.com/dc-js/dc.js/issues/952

I think it works slightly better in 1.7 than in the 2.0 development branch, but it is still not perfect.

The only thing I can think of as a workaround for now is to create a renderlet which adjusts the widths after the fact. :-(