score:30

Accepted answer

Bar charts in dc.js use the xUnits function to automatically calculate the width of the bars in a histogram based on the range of your x-axis. If you want to set the width to a static value you can use a custom xUnits function for example:

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

This should give you a more fitting width.

score:4

The suggestion given by user2129903 to use the chart.xUnits() to specify a custom xUnits function is indeed the way to go. I'd like to add to that an example and a bit of an explanation as to choose the return value of that custom function.

The doc says:

This function is expected to return a Javascript array of all data points on x axis, or the number of points on the axis.

That is, assuming you want to make a histogram, you can either directly specify the number of bins or calculate it from your desired bin size and return that from that function. You need to specify this when the numeric keys of your grouping are not successive, equidistant integers.

Here is an example:

<!DOCTYPE html><meta charset="utf-8">
<head>
    <link rel="stylesheet" type="text/css" href="js/dc.css"/>
    <script src="js/crossfilter.js"></script>
    <script src="js/d3.js"></script>
    <script src="js/dc.js"></script>
</head>
<body>
    <div id="chart"></div>
</body>
<script>
    // generate data
    var min_value = 0, max_value = 18, value_range = max_value-min_value;
    var data = [];
    for (var i = 0; i < 1000; i++)
        data.push({x: Math.random()*value_range+min_value});
    // create crossfilter dimension for column x
    var cf = crossfilter(data),
        x = cf.dimension(function(d) {return d.x;});
    // create histogram: group values to `number_of_bins` bins
    var number_of_bins = 10,
        bin_width = value_range/number_of_bins,
        //number_of_bins = value_range/bin_width,
        x_grouped = x.group(
            function(d) {return Math.floor(d/bin_width)*bin_width;});
    // generate chart
    dc.barChart("#chart").dimension(x)
        .group(x_grouped)
        .x(d3.scale.linear().domain([min_value,max_value]))
        // let the bar widths be adjusted correctly
        .xUnits(function(){return number_of_bins;})
        .xAxis();
    dc.renderAll();
</script>

Note that in this example it can also work to retrieve the number of bins or the bins' key values from the group object itself, e.g., like this

// number of bins
chart.xUnits(function(){return x_grouped.all().length;});
// bins' key values
chart.xUnits(function(){return x_grouped.all().map(function(d) {return d.key;});});

This will however fail (i.e., produce the wrong bar width), when there are empty bins.

For reference:


Related Query