d3jsv4 timeline chart with vertical month axis during scrub - d3.js

Question

I am trying to build a d3js timeline chart with axis grid lines vertically indicating the month region.
https://www.cssscript.com/demo/simple-scrollable-timeline-chart-with-d3-js-d3-timeline/
^ something like this featured some code - which I think is v3
var xAxis = d3.svg.axis().scale(x).orient('bottom').tickSize(-height);
svg.append('g').attr('class', 'x axis').attr('transform', 'translate(0,' + height + ')').call(xAxis);
my current implementation has failed.
https://jsfiddle.net/g89kuoe1/4/
these are the v4 methods to create axis -- but it needs to be repeated on the chart to formulate the grid lines.
var xAxis = d3.axisBottom(xRange).tickFormat(function(d){ return d.x;});
var yAxis = d3.axisLeft(yRange);
or should a new clip path be made to contain these lines - and add them as lines - with x1 values that hit each month?

Answer 1

https://jsfiddle.net/c8gdfxob/
** SOLVED -- had to use minExtent and maxExtent -- and force the scale of the ticks to be a month
this creates non-moving vertical grid lines - but I am unsure how to adapt it to the codebase so they morph with the scrub
it maps the timeline months -- but doesn't flow with the morph..
var scale = d3
.scaleTime()
.range([0, w])
.domain([minExtent, maxExtent]);
// Gridline
var gridlines = d3.axisTop()
.tickFormat("")
.ticks(d3.timeMonth)
.tickSize(-mainHeight)
.scale(scale);
main.selectAll(".grid").remove()
main.append("g")
.attr("class", "grid")
.call(gridlines);