Add y-axis gridlines to D3 Gantt chart

问题

What's the best way of adding horizontal gridlines to a d3 gantt chart like in this example? I was originally thinking of making an axis and making the tick marks the length of the chart (as in this example), but this puts them directly in the middle of the chart rectangles.

Is it possible to make the axis ticks into "lanes" around the rectangles, or would it just be easier to plot lines (as done here)?

回答1:

A solution comes from this issue post on GitHub. Basically just translate the axis group by half the width of the band:

var yScale = d3.scaleBand()
        .domain(lanes)
        .rangeRound([0, chartHeight], 0.1);

var yGridAxis = d3.axisLeft()
        .scale(yScale)
        .tickFormat('')
        .tickSize(-chartWidth);

chart.append('g')
        .attr('class', 'grid')
        .attr('transform', function(d) {
            return 'translate(0,' + (-yScale.bandwidth()/2) + ')';
        })
        .call(yGridAxis);

来源：https://stackoverflow.com/questions/48711277/add-y-axis-gridlines-to-d3-gantt-chart