将y轴网格线添加到D3甘特图 [英] Add y-axis gridlines to D3 Gantt chart

问题描述

在此示例中，向d3甘特图添加水平网格线的最佳方法是什么? ?我本来是想做一个轴并在刻度线上打勾(如此示例)，但这会将它们直接放在图表矩形的中间.

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

推荐答案

一种解决方案来自此在GitHub上发布帖子.基本上只需将轴组平移带的一半宽度即可:

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

这篇关于将y轴网格线添加到D3甘特图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！