d3 SVG текстовый элемент background-color с getBBox () неправильный порядок

Question

Я хотел бы добавить цвет фона для элементов текста.Я понимаю, что не могу установить цвет фона с помощью стилей CSS, потому что это текст SVG, поэтому я попытался добавить прямоугольники, но к успеху:

Codepen

let g = svg.selectAll("g")
            .data(["1 year", "2 years", "3 years", "4 years", "5 years"])
            .enter()
            .append("g")
            .attr("transform", "translate(" + (markerCirclesScale(name) + 330) + "," + (fullSVGHeight / 2 - 60)  + ")" );
        g.append("text")
            .attr("text-anchor", "middle")
            .style("font-size", 10)
            .style("fill", "black")
            .attr("y", function(d,i){
                return i * (-65);
            })
            .text(function(d){
                return d;
            })

        g.append("rect")
                    .attr("x", function(d){ return this.parentNode.getBBox().x - 10;})
                    .attr("y", function(d, i){ return  this.parentNode.getBBox().y })
                    .attr("width", function(d){ return this.parentNode.getBBox().width + 20;})
                    .attr("height", function(d) {return 40;})
                    .style("fill", "#80d6c7");

ОднакоЯ понял, что изменение порядка в DOM делает хитрость, почему это не работает при изменении порядка кода?!

Answer 1

Вы вставляете элементы <text>, а затем закрываете их элементами <rect>.

Если вы просто поменяете порядок добавления этих элементов, появится текст.

Вот мой кодовый блок