javascript - Axis 和 svg 文本元素相互隐藏

Question

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

 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 文本会被隐藏。当我关闭轴文本时，svg 文本可以正常工作

这是我的 fiddle :http://jsfiddle.net/anton9ov/jhf63wpy/

Answer 1

当你这样做时:

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

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

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

这是你的 fiddle :http://jsfiddle.net/h5xnwwpd/