I have a bar graph at http://hahnsb0579.liveblog365.com/ and currently having an issue with the paddingOuter.
I get a huge padding at the top if I set .paddingOuter(0.11).
but if I change it to .paddingOuter(0.10), seems like it's just working fine.
I've been trying to solve this issue for 2 days already but couldn't solve it.
The key piece of code related to this issue is as below.
const yScale0 = d3.scaleBand()
.domain(nexMeritDataObjBefore.members.map(function (e) {
return e.name;
}))
.rangeRound([0, yRangeMax])
.paddingOuter(0.11)
.paddingInner(0.2)
.align(0.8)
The documentation for band.round (which is used by rangeRound) says:
Note that if the width of the domain is not a multiple of the cardinality of the range, there may be leftover unused space, even without padding!
Therefore, a simple solution is just using range instead:
.range([0, yRangeMax])