我正在使用基于 d3 和 crossfilter的 Dimensional Charting javascript 库dc.js制作条形图。
我想要做的就是显示一个具有指定数量的 bin 的直方图,这应该很容易使用该barChart
功能。
我有一个名为的数组data
,其中包含 0 到 90000 之间的浮点值,我只想使用具有 10 个 bin 的直方图显示分布。
我使用以下代码生成下面的直方图:
var cf = crossfilter(data);
var dim = cf.dimension(function(d){ return d[attribute.name]; });
var n_bins = 10;
var xExtent = d3.extent(data, function(d) { return d[attribute.name]; });
var binWidth = (xExtent[1] - xExtent[0]) / n_bins;
grp = dim.group(function(d){return Math.floor(d / binWidth) * binWidth;});
chart = dc.barChart("#" + id_name);
chart.width(200)
.height(180)
.margins({top: 15, right: 10, bottom: 20, left: 40})
.dimension(dim)
.group(grp)
.round(Math.floor)
.centerBar(false)
.x(d3.scale.linear().domain(xExtent).range([0,n_bins]))
.elasticY(true)
.xAxis()
.ticks(4);
这看起来不太对劲:每个酒吧都非常瘦!我想要一个看起来很正常的直方图,其中的条很粗并且几乎相互接触,每个条之间可能有几个像素的填充。知道我做错了什么吗?