[d3jsv4时间轴图表，在擦洗期间具有垂直月份轴

Question

我正在尝试构建一个d3js时间线图表，其中轴网格线垂直指示月份区域。

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

这会创建不动的垂直网格线-但我不确定如何使它适应代码库，以便它们通过scrub进行变形

  // Scale
  var scale = d3.scaleLinear()
                .domain( [0, 100] )
                .range( [0, w] );



  // Gridline
  var gridlines = d3.axisTop()
                    .tickFormat("")
                    .tickSize(-mainHeight)
                    .scale(scale);

  main.append("g")
     .attr("class", "grid")
     .call(gridlines);