D3 tickSizeOuter(0) to remove end-ticks NOT working - d3.js

Question

I'm following the example here to remove end ticks in my bar graph, as follows:
var yAxis = d3.axisLeft(yScale);
yAxis.tickValues([0, 500, 1000, 1500, 2000, 2500]);
yAxis.tickSizeOuter(0); // <--- This does not remove the end ticks
However, this does not remove the end ticks in the y-axis.
Now, when I enter this line of code:
yAxis.tickSize(0);
I am able to remove all the ticks on the y-axis.
Why isn't the tickSizeOuter(0) code working and how can I remove just the end-ticks?
Here is the version of d3 I am using with my Angular project:
"d3": "^5.9.1"

Answer 1

yAxis.tickSizeOuter(0) remove outer ticks which means that y line is straight line, but it doesn't remove actual ticks (e.g. 0-). If you what that you should use something like:
const tick_count = d3.selectAll("g.axis.axis--y .tick").size();
d3.selectAll("g.axis.axis--y .tick")
.each(function (d, i) {
console.log(d,i)
if ( i == 0 || i == tick_count-1) {
this.remove();
}
});
Hope I understand correctly your misunderstanding :)

Answer 2

Working solution for D3 v5.9.2:
After you declared yAxis and set the attributes, wrap it in a g and call it:
var yAxis = d3.axisLeft(yScale);
yAxis.tickValues([0, 500, 1000, 1500, 2000, 2500]);
svg.append("g").attr("id", "yAxisG").call(yAxis);
Remove the first <path> element from the group:
d3.select("g#yAxisG").select("path").remove();