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

时间:2018-02-09 17:37:15

标签: javascript d3.js charts gantt-chart

this example中添加水平网格线到d3甘特图的最佳方法是什么?我原本想要制作一个轴并使刻度标记图表的长度(如this example中所示),但这会将它们直接放在图表矩形的中间。

是否可以让轴刻入"车道"在矩形周围,或者只是更容易绘制线条(如here所做)?

1 个答案:

答案 0 :(得分:3)

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