在使用大型数据集和d3.scale.linear()时,使dc.js中的条形宽度和间隙保持一致

Question

使用dc.js和较小的数据集创建条形图时,我可以看到条形图和间隙看起来非常一致.

当使用更大的数据集和d3.scale.linear()时,我无法使用条形图和间隙看起来像使用日期图表和d3.time.scale()时那样好.

条形太薄或太厚而没有间隙 - http://neil-s.com/unison/crossfilter/test/Crossfilter.jpg

以下是我上图中顶部条形图之一的示例代码:

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)

我已经尝试了差距,xUnits和ticks值,但没有运气.有什么建议？

Answer 1

不漂亮！

这是 dc.js 的一个已知错误。

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

我认为它在 1.7 中比在 2.0 开发分支中工作得稍微好一些，但它仍然不完美。

目前我唯一能想到的解决方法是创建一个渲染器，在事后调整宽度。:-(