I want to set up the year interval to every 3 years and start from 2012 in this example: https://www.tutorialsteacher.com/d3js/create-bar-chart-using-d3js. How should I modify the code to make this happen? My desired output is as in the picture above.
Hide ticks with tickFormat:
d3.axisBottom(xScale)
.tickFormat((d, i) => i % 3 === 0 ? 1900 + d.getYear() : null)
const from = new Date('2010-01-01')
const to = new Date('2022-01-01')
const xScale = d3.scaleTime()
.domain([from, to])
.range([0, 400]);
const xAxis = d3.axisBottom(xScale)
.tickFormat((d, i) => i % 3 === 0 ? 1900 + d.getYear() : null)
d3.select('svg').append("g")
.attr("transform", `translate(50,50)`)
.call(xAxis);<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="100" />