After reviewing a few answers on this, I found that they are not solving my issue.
- how-to-limit-d3-svg-axis-to-integer-labels
- d3-tick-marks-on-integers-only
My problem centers around an array of years:
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));
However, with this approach, I encounter the following result.
https://i.sstatic.net/YvDO6.png
Upon adding .tickFormat(d3.format("d"))
as shown below:
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 end up with the following outcome:
https://i.sstatic.net/9ydYG.png
Although the decimal is removed, the x-axis still displays repeated values such as 2011, 2011, ...
Is there a solution to ensure that the x-axis only shows: 2010, 2011, 2012, ...?