I have noticed that the ticks do not seem to be well aligned in the axis, and i think it is a bug in the newer version of d3, because the ticks seem to be well aligned in d3 version 3.5.17.

To illustrate the issue, i tried to show the difference in those two "pens" :
d3 version 3.5.17: https://codepen.io/BedwardVedicci/pen/LYbjmwR // comments are in the "JS Window" of the pen
d3 version 6.5.0: https://codepen.io/BedwardVedicci/pen/poNrVBG // comments are in the "JS Window" of the pen

Changes made from "3.5.17" to "6.5.0" are as follows :

• Changed "scale.linear()" To "scaleLinear()"
• Changed "scale.threshold()" To "scaleThreshold()"
• Changed ".svg.axis().scale(legendX).orient('bottom')" To ".axisBottom(legendX)"

Note: The misalignment may not seem obvious from first glance, but there is, you can be sure of that if you check the "x" attribute.