Cannot set d3 axis to only integers

I've looked at a couple of answers on here:

1. how-to-limit-d3-svg-axis-to-integer-labels
2. d3-tick-marks-on-integers-only

But they're not working for me.

I have an array of years, for example:

years: Array<number> = [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017];
let minXAxis = Math.min(...this.years);
let maxXAxis = Math.max(...this.years);

this.xScale = d3.scaleLinear().range([this.margins.left, this.width - this.margins.right]).domain([minXAxis, maxXAxis]);

this.xAxis = svg.append("g")
  .attr("class", "axis axis-x")
  .attr("transform", `translate(0, ${this.height - this.margins.bottom})`)
  .call(d3.axisBottom(this.xScale));

Doing just this gives me the following.

Then when I used .tickFormat(d3.format("d")) like so:

this.xAxis = svg.append("g")
  .attr("class", "axis axis-x")
  .attr("transform", `translate(0, ${this.height - this.margins.bottom})`)
  // set to only display ticks for digits
  .call(d3.axisBottom(this.xScale).tickFormat(d3.format("d")));

I get the following

As you can see, it got rid of the decimal, but it still lists as duplicates, e.g 2011, 2011, ...

How do I fix this so the x axis only shows: 2010, 2011, 2012, ...?