график времени d3jsv4 с вертикальной осью месяца во время чистки

Question

Я пытаюсь построить график временной шкалы d3 js с линиями сетки осей, вертикально указывающими регион месяца.

https://www.cssscript.com/demo/simple-scrollable-timeline-chart-with-d3-js-d3-timeline/ ^ что-то вроде этого содержит некоторый код, который я думаю, 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);

моя текущая реализация не удалась. https://jsfiddle.net/g89kuoe1/4/

это методы v4 для создания оси - но это необходимо повторить на графике, чтобы сформулировать линии сетки.

var xAxis = d3.axisBottom(xRange).tickFormat(function(d){ return d.x;});
var yAxis = d3.axisLeft(yRange);

или Должен ли быть создан новый путь клипа, содержащий эти строки - и добавить их в виде строк - со значениями x1, которые появляются каждый месяц?

Answer 1

https://jsfiddle.net/c8gdfxob/ ** решено - пришлось использовать minExtent и maxExtent - и заставить масштаб тиков равным месяцу

это создает неподвижные вертикальные линии сетки - но я не уверен, как адаптировать его к базе кода, чтобы они изменялись с помощью scrub

он отображал месяцы временной шкалы - но не переходил с изменением ..

 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);