Как получить деления для оси d3? Как установить минимальный максимальный padding для tick? Или как нарисовать сетку с помощью d3 в canvas?

есть массив дата и значение, по нему нужно отрисовать график с маштабированием.
Так как массив может быть достаточно большого размера принял решение временную ось и элементы управления делать в svg, а остальное на canvas.
Под графиком нужно отрисовать сетку по времени, поэтому делать её на svg не вариант, т.к. тогда она будет поверх графика.

//width = ширина canvas
let x = d3.scaleTime()//set x domain
	    	.domain([mindate, maxdate])
         	.range([margin.left, width];
let xAxis = d3.axisTop(x)
	    				.tickSize(12)
	    				.ticks(width/84)
	    				.tickFormat(multiFormat)
	    				.scale(x);
let gX = svg
				          .append("g")
				          .attr('class', 'axisTime')
						  .attr("transform", "translate("+0+",50)");

gX.call(xAxis); //рисует ось по времени

хочу разобраться, что здесь gX.call(xAxis); происходит, чтобы вытащить массив с координатами делений. (в свг они выводятся с разным значением translate)
координаты делений нужны, чтобы начертить их в canvas
сейчас сетку рисую вот так:

let gridSize = d3.range(margin.left,  width, 84)

                               context.beginPath();//vertical grid
				context.setLineDash([]);
				context.lineWidth = 0.3;
				context.strokeStyle = 'red';//grid_gradient;
	  		 gridSize.forEach((value)=>{ 
				context.moveTo(value, y(minvalue));
				context.lineTo(value, y(maxvalue));
			})
	  		context.stroke();

но с таким подходом не очень то попадаю в деления на оси времени, а при масштабировании так вообще мимо