使用dc.js和crossfilter.js在barChart中正确显示bin宽度

Question

我正在使用Dimensional Charting javascript库dc.js创建一个条形图,它基于d3和crossfilter.

我想要做的就是显示一个具有指定数量的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);

这看起来并不正确:每个酒吧都很瘦!我想要一个看起来很正常的直方图,其中条很粗,几乎相互接触,每个条之间可能有几个像素的填充.知道我做错了什么吗？

Answer 1

dc.js中的条形图使用xUnits函数根据x轴的范围自动计算直方图中条形的宽度.如果要将宽度设置为静态值,可以使用自定义xUnits函数,例如:

chart.xUnits(function(){return 10;});

这应该给你一个更合适的宽度.