d3.js - 使用大型数据集和 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 和刻度值，但没有运气。有什么建议？

Answer 1

不漂亮!

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

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

我认为它在 1.7 中的效果比在 2.0 开发分支中要好一些，但它仍然不完美。

我现在唯一能想到的解决方法是创建一个在事后调整宽度的renderlet。 :-(