How can I insert multiple text of different size into multiple svg rect using d3.js in Angular 11?

this.svg = d3
            .select(this.element.nativeElement)
            .append('svg')
            .attr('class', 'wordcloud-svg')
            .attr('width', 1200)
            .attr('height', 400)
            .append('g')
            .attr('transform', 'translate(' + (600) + ',' + (200) + ')');

var element=this.svg
                        .selectAll('text')
                        .data(words)
                        .enter()
                        .append('text')
                        .attr('id','word')
                        .style('font-size', (d) => d.size*5/6 + 'px')
                        .attr('text-anchor', 'middle')
                        .attr(
                            'transform',
                            (d) => 'translate(' + [d.x, d.y] + ')rotate(' + d.rotate + ')'
                        )
                        .text((d) => {
                            return d.text;
                        })
element.selectAll('word')
            .data(words)
            .enter()
            .append("rect")
            .attr("x", function(d) { return this.getBBox().x;})
            .attr("y", function(d) {return this.getBBox().y;})
            .attr("width", function(d) {return this.getBBox().width;})
            .attr("height", function(d) {return this.getBBox().height;})
            .style("fill", "grey");

**I have created a word cloud and I am trying to enclose each word of that word cloud inside a SVG rectangle but I am having trouble while doing that. Not sure how can i do that. **