如何选择 dc.js 条形图中的 bin 数量？

Question

我在 dc.js 中创建了一个条形图：

d3.csv("input.csv", function (error, data) {
    data.forEach(function (x) {
        x.x = +x.x;
    });

    var ndx = crossfilter(data),
    dim1 = ndx.dimension(function (d) {
                return Math.floor(parseFloat(d['x']) * 10) / 10; 
            });
    var group1 = dim1.group(),

    chart = dc.barChart("#barchart");

    chart
        .width(500)
        .height(200)
        .dimension(dim1)
        .group(group1)
        .x(d3.scale.linear().domain([0,3]))
        .elasticY(true)
        .barPadding([0.4])

    chart.xAxis().tickFormat(function(d) {return d});
    chart.yAxis().ticks(10);
});

但是柱数很少。我想将显示的条数增加到 12。

如何选择柱数？

Answer 1

这些行决定了 bin 的数量：

dim1 = ndx.dimension(function (d) {
            return Math.floor(parseFloat(d['x']) * 10) / 10; 
        });
var group1 = dim1.group(),

您在这里所做的是四舍五入到前十分之一 (0.1)。因此，x 等于 1.12、1.16、1.19 的任何行都将计入 1.1 bin 等

如果您想要确切的 bin 数量，则必须确定 x 的范围并将其除以所需的 bin 数量。如果您不需要那么精确的东西，您可以 fiddle 加上数字 10，直到得到您想要的东西。

比如改成

dim1 = ndx.dimension(function (d) {
            return Math.floor(parseFloat(d['x']) * 20) / 20; 
        });
var group1 = dim1.group(),

会给你两倍的箱子，因为它会向下舍入到前二十 (0.05)。

所以 1.12 将四舍五入为 1.10； 1.16、1.19 将四舍五入为 1.15 等

顺便说一句，parseFloat 是不必要的，因为您已经使用 x.x = +x.x

将 x 转换为数字

如何选择 dc.js 条形图中的 bin 数量？

How to choose number of bins in a dc.js barchart?

crossfilter

dc.js