Append SVG Text at the top of a Bubble Group/Cluster. d3.js

I have these group of bubbles.enter image description here

And I’m trying to add an svg:text at the top center of each cluster. The problem is I have no way of getting the height of each cluster. I have no problem getting the center.

I tried getting the max height bubble in each cluster after the simulation ends:

                .force("y", d3.forceY().strength(0.1).y(heightLevel2)).on('end', () => {
                    var index = 0;
                    clusterHeightList.push(0);
                    d3.selectAll('.chart-bubble circle').each(function () {
                        const el = d3.select(this);
                        
                        if (clusterHeightList[index] < el.attr('cy')) {
                            clusterHeightList[index] = el.attr('cy');
                        }
                        if (data.data.includes(groupBreak)) {
                            clusterHeightList.push(0);
                            index++;
                        }

                        groupBreak++;
                    })
                //More logic where I append SVG text based on the max height of each cluster.
               });

The problem is that it is slow, since I have to wait for the simulation to finish. Also it’s slightly inaccurate.

I can guesstimate the height but that’s never the right way to go about dynamic data.

ideal example of text:
enter image description here

Any help would be helpful.