Rectangle 27 0

Horizontal Chart (2 bars), ordinal with inner padding

I've found the best way to control bar size and centering is to not mess around with the x/y or width/height attributes of the rect, but to instead use the padding parameters in rangeBands() or rangeRoundBands(). Below are some example charts plotting gender data:

var yScale = d3.scale.ordinal().rangeRoundBands([0,chartHeight],.5,.1);

This method will let you adjust the bar size while maintaining alignment with the ordinal.

javascript - Always center bar on ordinal for bar charts - Stack Overf...

javascript svg d3.js bar-chart rect