How can I center the label so that it stays on zoom for the d3.scaleTime()?
const scaleX = d3.scaleTime()
.domain([
min,
max
])
.range([0, width - paddings.left - paddings.right])
.nice()
const periodLength = max.getFullYear() - min.getFullYear() // in years
const quaters = {
0: 'I',
3: 'II',
6: 'III',
9: 'IV'
}
const getLabelFormat = d => {
if (periodLength > 2) {
return d.getFullYear()
} else {
return `${d.getFullYear()} - ${quaters[d.getMonth()]}`
}
}
let tickFrequency = [10]
if (periodLength < 10) {
if (periodLength > 2) {
tickFrequency = [d3.timeYear.every(1)]
} else {
tickFrequency = [d3.timeMonth.every(3)]
}
}
const axisX = d3.axisBottom(scaleX)
.tickArguments(tickFrequency)
.tickFormat(getLabelFormat)