Scaleband() Shifts The Values Left

I have no idea of what I'm doing wrong at this point. scalePoint works and the values are in line with the axis, but scaleBand does for some reason shift left. My fiddle: https://j

Solution 1:

The band scale doesn't shift the value to the left. What you're getting in your chart is the expected behaviour, and that's exactly the difference between scalePoint and scaleBand. In a band scale:

Discrete output values are automatically computed by the scale by dividing the continuous range into uniform bands (emphasis mine).

Right now, for each circle, you're getting the start of the band:

return x(d.ball);

So, to have an output similar to a point scale, you should divide the band by 2:

return x(d.ball) + x.bandwidth()/2;

Here is your fiddle: https://jsfiddle.net/jxdsqqwy/