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

这些行决定了箱子的数量：

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等等。

如果你想要一个确切数量的箱子，你必须确定x的范围并除以你想要的箱子数量。如果你不需要任何精确的东西，你可以在那里摆弄数字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等。

BTW，parseFloat是不必要的，因为您已使用x.x = +x.x将x转换为数字

如何在dc.js条形图中选择箱数？

1 个答案: