将 y 轴网格线添加到 D3 甘特图

Posted 2023-05-08

【中文标题】将 y 轴网格线添加到 D3 甘特图

【英文标题】：Add y-axis gridlines to D3 Gantt chart

【发布时间】：2018-07-20 13:05:21

【问题描述】：

将水平网格线添加到像this example 中的 d3 甘特图的最佳方法是什么？我最初想制作一个轴并将刻度标记为图表的长度（如this example），但这会将它们直接放在图表矩形的中间。

是否可以让轴在矩形周围的“车道”中打勾，还是更容易绘制线条（如 here 所做的那样）？

【参考方案1】：

解决方案来自this issue post on 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);