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

【问题标题】：Making bar widths and gaps consistent in dc.js when using a large dataset and d3.scale.linear()使用大型数据集和 d3.scale.linear() 时，在 dc.js 中使条形宽度和间隙保持一致
【发布时间】：2014-07-24 13:37:39
【问题描述】：

当使用 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 和刻度值，但没有运气。有什么建议吗？

【问题讨论】：

标签： d3.js dc.js crossfilter

【解决方案1】：

不漂亮！

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

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

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

我现在唯一能想到的解决方法是创建一个渲染组件，它会在事后调整宽度。 :-(

【讨论】：

我在其他网站上看到了一些相关的帖子，让我认为这是一个错误。感谢您在 dc.js 上所做的工作，Gordon。我期待着第 2 版。:)
Gordon，你知道这是否是其他 dc.js 图表的问题吗？我正在使用 d3.scale.linear() 作为 x 轴域来制作折线图。与条形图一样，使用较小的数据集比使用较大的数据集看起来要好得多：neil-s.com/unison/crossfilter/test/LineCharts.jpg
我不认为这是同一个问题。实际上，我不知道你怎么能画出一个漂亮的带有这么多尖峰的折线图，除非放大。:-/如果你有任何建议，create an issue
这是有道理的。感谢您回复我，戈登。
太糟糕了，链接已经失效。应该将这些屏幕截图复制到问题中！