D3 Graph - changing y-axis to integer

Question

I'm trying to create integer bands in the y axes.

Have tried changing .scaleband to .scalelinear and .ticks "arbitraryMetric" is stored as an integer.

Code:

const categories = vizData.map(d => d.arbitraryMetric);

const yScale = d3
.scaleBand()
.domain(categories)
.range([0, vizHeight - timelineMargin.bottom]);

const labels = vizCanvas
.selectAll('text')
.data(categories)
.enter()
.append('text')
.style('font-family', style.fontFamily)
.style('fill', '#3C4043')
.attr('x', timelineMargin.left - 10)
.attr('y', d => yScale(d) + yScale.bandwidth() / 2)
.attr('text-anchor', 'end')
.text(d => d);

Answer 1

This following solution will do the trick - credit to this answer

const yAxisTicks = yScale.ticks()
    .filter(tick => Number.isInteger(tick));

const yAxis = d3.axisLeft(yScale)
    .tickValues(yAxisTicks)
    .tickFormat(d3.format('d'));