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

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

Answer 1

执行此操作时：

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

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

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

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

Axis和svg文本元素互相隐藏

1 个答案: