paddingOuter gets me a huge outer padding-CodePudding

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)

CodePudding user response：

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])