D3 bar chart - last bar overhangs the end of the X axis

问题

I have a D3 stacked bar chart that is working great except that the last bar overhangs the right side of X axis and the left side of the axis is not touching the Y axis. This is because I had to move the bars so that they would be centered over the tick lines. I thought that if I padded the time scale by a date on either end that would take care of it, but instead the bars just spread out to take up the available space.

Here is a JSFiddle: http://jsfiddle.net/goodspeedj/cvjQq/

Here is the X scale:

var main_x = d3.time.scale().range([0, main_width-axis_offset - 5]);

This is my attempt to pad the X axis by a date on either end:

main_x.domain([
    d3.min(data.result, function(d) { 
        return d.date.setDate(d.date.getDate() - 1); 
    }), 
    d3.max(data.result, function(d) { 
        return d.date.setDate(d.date.getDate() + 1); 
    }
)]);

The calculation for the x attribute on the bars is:

.attr("x", function(d) { return main_x(d.date) - (main_width/len)/2; })

This is a minor thing, but it is really annoying me. Thanks!

回答1:

The main problem was that you had a clip path in your SVG that clipped parts of the plotting region. Once that is removed, you can see the full graph, but the first and last bars will still "hang" over the ends of the axis.

To change that, you have to extend the axis, e.g. by adding a day or two either way when computing the minimum and maximum for the scale.

来源：https://stackoverflow.com/questions/22947920/d3-bar-chart-last-bar-overhangs-the-end-of-the-x-axis