Axis和svg文本元素相互隐藏

Axis and svg text elements hide each other

本文关键字：隐藏 元素 文本 svg Axis      更新时间：2023-09-26

工具提示中有条形图，当悬停蓝色矩形时显示。在这些条的左边有坐标轴文本元素:

 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文本工作ok

这是我的小提琴:http://jsfiddle.net/anton9ov/jhf63wpy/

当你这样做的时候:

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

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

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

这是你的小提琴:http://jsfiddle.net/h5xnwwpd/

相关文章：