d3.js - D3 网格线/刻度线出现在文本上方

Question

我创建了一个 D3 条形图竞赛（代码可在https://codepen.io/slurye/pen/xxdqePr获得）。虽然条形图的标签出现在网格线/刻度线上方，但图表右下角的文本用于添加标题和代码出现在线条下方。我尝试使用 .raise()/.lower() 并以不同的顺序编写我的代码，但这不起作用。我应该怎么办？

作为参考，这是构建刻度线的代码部分：

 let xAxis = d3.axisTop()
    .scale(x)
    .ticks(width > 500 ? 5:2)
    .tickSize(-(height-margin.top-margin.bottom))
    .tickFormat(d => d3.format(',')(d));

 svg.append('g')
   .attr('class', 'axis xAxis')
   .attr('transform', `translate(0, ${margin.top})`)
   .call(xAxis)
   .selectAll('.tick line')
   .classed('origin', d => d == 0);

标签： d3.js