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

Tags:

Axis

D3.Js