在this example中添加水平网格线到d3甘特图的最佳方法是什么?我原本想要制作一个轴并使刻度标记图表的长度(如this example中所示),但这会将它们直接放在图表矩形的中间。
是否可以让轴刻入"车道"在矩形周围,或者只是更容易绘制线条(如here所做)?
答案 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);