score:5

Accepted answer

dc.js takes the domain pretty literally - the x axis stretches exactly from the beginning to the end, disregarding the width of the bars or their placement. It's a design bug.

Here are two workarounds.

keep bars centered and add padding

If you're using elasticX you can manually correct it like this:

chart.centerBar(true)
    .xAxisPadding(15).xAxisPaddingUnit('day')

If you're just setting the domain manually, that's

minDate = d3.time.day.offset(minDate, -15);
maxDate = d3.time.day.offset(maxDate, 15);

align the ticks to the left of bars and correct the right side of the domain

You don't say what problem you run into when you don't center the bars. But I know the right bar can get clipped.

If you want the elasticX effect, you can implement it manually like this, offsetting the right side by a month (example):

function calc_domain(chart) {
    var min = d3.min(chart.group().all(), function(kv) { return kv.key; }),
        max = d3.max(chart.group().all(), function(kv) { return kv.key; });
    max = d3.time.month.offset(max, 1);
    chart.x().domain([min, max]);
}
chart.on('preRender', calc_domain);
chart.on('preRedraw', calc_domain);

Or without elasticX that's just:

maxDate = d3.time.month.offset(maxDate, 1);

Related Query

More Query from same tag