將y軸網格線添加到D3甘特圖

Question

在此示例中，向d3甘特圖添加水平網格線的最佳方法是什么？ 我本來是想制作一個軸並在刻度線上打勾（如本例所示 ），但這將它們直接放在圖表矩形的中間。

是否有可能使軸在矩形周圍打成“車道”，或者繪制線是否更容易（如此處所示 ）？

Answer 1

一個解決方案來自GitHub上的這個問題 。 基本上，只需將軸組平移波段寬度的一半即可：

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