D3：条形图的文本不出现

Question

我是d3.js的新手，正在尝试创建条形图图形，但是在创建前两个条形图时，当我尝试创建第三个条形图时，要添加到条形图上的文本隐藏在酒吧。

这是我的代码：

   const kHeightSVG1 = 241;
    const xMargin = 30;
    const yTopMargin = 15;
    const yBottomMargin = 50;
    const barWidth = 50;
    const localAdvStats = this.state.local_tcas["data"]["team_tcas"][0];
    const awayAdvStats =  this.state.away_tcas["data"]["team_tcas"][0];
    const abrevLocalTeam = this.state.local_team["data"]["teamclub"][0]["abrev"];
    const abrevAwayTeam = this.state.away_team["data"]["teamclub"][0]["abrev"];
    let svg1 = d3.select("#graph1").style("background-color", "#091E36");
    svg1.attr("height", kHeightSVG1);
    svg1.attr("width", "100%");
    let yScale = d3.scaleLinear().domain([0, 100]).range([kHeightSVG1-yBottomMargin-yTopMargin, 0]);
    //Añadimos eje de las y
    let g = svg1.append("g").attr("transform", "translate(" + xMargin + "," + yTopMargin + ")");
    g.append("g").call(d3.axisLeft(yScale).tickFormat(function(d){
        return d;
    }).ticks(10)).style("color", "#FFFFFF");
    //Bar1
    //Añadimos primer bloque de etc
    console.log("yScale: " + yScale(localAdvStats["etc"]) + yTopMargin);
    let g1 = svg1.append("g");
    g1.append("rect")
    .attr("x", xMargin+3)
    .attr("y", yScale(localAdvStats["etc"]) + yTopMargin)
    .attr("width", barWidth)
    .attr("height", kHeightSVG1-yTopMargin-yBottomMargin-yScale(localAdvStats["etc"]));
    // //Añadimos cifra a la primera barra
    g1.append("text")
    .attr("transform", "translate(" + xMargin + "," + yTopMargin + ")")
    .attr("x", xMargin+10)
    .attr("y", yScale(localAdvStats["etc"]) + yTopMargin)
    .attr("font-size", "32px")
    .text(localAdvStats["etc"]);
    g1.append("text")
    .attr("transform", "translate(" + xMargin + "," + yTopMargin + ")")
    .attr("x", xMargin+12)
    .attr("y", yScale(localAdvStats["etc"]) + yTopMargin + 12)
    .text("(" + abrevLocalTeam + ")");
    //Bar 2
    let g2 = svg1.append("g");
    g2.append("rect")
    .attr("x", barWidth + xMargin + 3)
    .attr("y", yScale(awayAdvStats["etc"]) + yTopMargin)
    .attr("width", barWidth)
    .attr("height", kHeightSVG1-yTopMargin-yBottomMargin-yScale(awayAdvStats["etc"]));
    g2.append("text")
    .attr("x", barWidth*2.5)
    .attr("y", yScale(awayAdvStats["etc"]) + yTopMargin + 12)
    .attr("font-size", "32px")
    .text(awayAdvStats["etc"]);
    g2.append("text")
    .attr("x", barWidth*2.5)
    .attr("y", yScale(awayAdvStats["etc"]) + yTopMargin + 24)
    .text("(" + abrevAwayTeam + ")");
    //Bar 3
    let g3 = svg1.append("g");
    g3.append("rect")
    .attr("x", barWidth*3 + xMargin)
    .attr("y", yScale(localAdvStats["p_reb_of"]) + yTopMargin)
    .attr("width", barWidth)
    .attr("height", kHeightSVG1-yTopMargin-yBottomMargin-yScale(localAdvStats["p_reb_of"]));
    g3.append("text")
    .attr("x", barWidth*3 + xMargin + 10)
    .attr("y", yScale(localAdvStats["p_ref_of"]) + yTopMargin)
    .attr("font-size", "32px")
    .text(localAdvStats["p_reb_of"]);

我用这段代码得到的是两个横条，上面有文本，而第三个横条后面是文本。

使条2和条3相等，但条3不在条形图上显示文本。我在做什么错了？