d3 tick marks on integers only
The proper solution is to retrieve ticks using .ticks()
method, filter them to keep only integers and pass them to .tickValues()
:
const yAxisTicks = yScale.ticks()
.filter(tick => Number.isInteger(tick));
const yAxis = d3.axisLeft(yScale)
.tickValues(yAxisTicks)
.tickFormat(d3.format('d'));
For completeness here is explanation why other solutions are bad:
@BoomShakalaka solution uses .tickSubdivide()
method, which no longer exists.
@cssndrx and @kris solutions force you to specify number of ticks, so it will not work in generic case.
You could add .ticks(4) and .tickSubdivide(0) as I've done below:
var yAxis = d3.svg.axis()
.scale(y)
.orient("right")
.ticks(4)
.tickFormat(d3.format("d"))
.tickSubdivide(0);