Making bar widths and gaps consistent in dc.js when using a large dataset and d3.scale.linear()
crossfilter, d3.js, dc.js
Solution
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. :-(
Problem
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?