D3轴刻度与条形重叠

Question

我用d3生成一个图表，问题是这个丑陋的效果是由于底部刻度和条形之间的重叠。

缩放

我首先绘制条形图然后生成轴，因此刻度线应始终位于条形图的顶部（在＆＃34; z＆＃34;尺寸上，考虑到svg中没有z-index的概念）并隐藏这种效果  但事实并非如此，我不确定这是否是svg或d3问题。

她基本上做的事情（伪代码和丢失的部分）：

// define scales
xScale
    .domain(d3.range(0, xMax))
    .rangeRoundBands([0, width], 0.2, 0.2)

yScale
    .domain([0, yMax])
    .range([height, 0])

// draw bars
d3.
    .selectAll(".bar")
    .data(data)
    .enter()
        .append("rect")
    .attr("class", "bar")

// draw the y axis (with long horizontal ticks)
yAxis
    .orient('left')
    .ticks(10)
    .tickPadding(15)
    .tickSize(-width)

d3.selectAll(g.axis-y)
    .attr("transform", "translate(0, 0)")
    .call(yAxis)

我意识到如果我问整个小组＆＃34; axis-y＆＃34;要在更高的z水平的条形图上，那么所有的刻度将与条形图重叠（不是我想要的） 我想要的是什么：为了隐藏丑陋的效果（或者达到相同结果的替代解决方案），底部标记在更高级别的栏上

编辑：我甚至很难画出轴，我将它添加到在条形之前创建的g组，所以实际上轴是在较低的水平上。 / p>