Exiba corretamente a largura da bandeja no barChart usando dc.js e crossfilter.js
Eu estou fazendo um gráfico de barras usando a biblioteca javascript de gráficos dimensionaisdc.js, que é baseado em d3 e crossfilter.
Tudo o que eu quero fazer é exibir um histograma com um número especificado de caixas, isso deve ser fácil usando obarChart
função.
Eu tenho uma matriz chamadadata
que contém valores de ponto flutuante entre 0 e 90000, e eu só quero exibir a distribuição usando um histograma com 10 caixas.
Eu uso o seguinte código para produzir o histograma abaixo:
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);
Isso não parece certo: cada barra é muito magra! Eu quero um histograma de aparência normal, onde as barras são grossas e quase se tocam, com talvez alguns pixels de preenchimento entre cada barra. Alguma ideia do que estou fazendo errado?