How to include additional lines between x-axis values using d3.js? - d3.js

Question

I created x axis with the values ​​and the labels and applied a style in grid lines. The code is below:
let xScale = d3.scalePoint().domain(axisXValues).range([0, width]);
let xAxisGenerator = axisXLabels.length > 0
? d3.axisBottom(xScale).ticks(axisXValues.length).tickFormat((d,i) => axisXLabels[i])
: d3.axisBottom(xScale).ticks(axisXValues.length);
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxisGenerator.tickSize(-height));
I would like to include more ticks between (green) the values ​​and apply a different style as in the example below:
Does anyone have an idea?
Thanks!

Answer 1

I would add a new linear scale with the same range and domain in the original point scale. (Keeping the original point scale and its rendered axis, of course)
Then calculate the values in between and plot the axis using axisBottom.tickValues()
Color of the tick line can be changed by accessing .tick line and applying the stroke attribute.
Do note that this would only work if the point scale's domain is equally spaced, i.e. linear.
Adding the following code to yours should work. Attaching a working codepen too.
const xScaleInBetween = d3.scaleLinear()
.range(xScale.range())
.domain(d3.extent(axisXValues));
let xTicks = xScale.domain();
let xTicksInBetween = Array.from({length: xTicks.length - 1},
(_, j) => ((xTicks[j] + xTicks[j+1]) /2));
chart.append("g")
.attr("class", "x-axis-between")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScaleInBetween)
.tickValues(xTicksInBetween)
.tickSize(-height))
.call(g => g.selectAll('.tick line').attr('stroke', 'green'))
.call(g => g.selectAll('.tick text').remove())