Javascript Axis和svg文本元素相互隐藏

工具提示中有条形图，当鼠标悬停在蓝色矩形上时会出现。条形图左侧有轴文本元素：

 var yScale = d3.scaleOrdinal()
        .domain(constNames)
        .range([barHeight/2, constResults.length * barHeight + barPadding - barHeight/2]);
      var yAxis = d3.axisLeft(yScale)
        .tickSize(nameLength)
        .tickPadding(0);
      svg2.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + nameLength + ",0)")
        .style("text-anchor", "start")
        .call(yAxis);

在条形图的右侧，我有带值的文本元素：

svg2.selectAll("text")
        .data(constResults)
        .enter()
        .append("text")
        .text(function(d) {
            return(d + "%");
        })
        .attr("text-anchor", "start")
        .attr("alignment-baseline", "central")
        .attr("y", function(d, i) {
            return i*(barHeight + barPadding) + barHeight/2;
        })
        .attr("x", function(d) {
            return xScale(d) + nameLength + barPadding/2;
        })
        .attr("font-family", "sans-serif")
                .attr("font-size", "12px")
                .attr("fill", "black");

问题是，当轴文本处于档位时，svg文本被隐藏。当我关闭axis文本时，svg文本工作正常

这是我的小提琴：

当你这样做时：

svg2.selectAll("text")
    .data(constResults)
    .enter()
    .append("text");

您正在选择所有文本元素，并且该SVG中已经有文本元素。您必须选择其他内容，如：

svg2.selectAll(".secondText")
    .data(constResults)
    .enter()
    .append("text");

这是你的小提琴：