I have these group of bubbles.

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:

Any help would be helpful.

side note: I created the data and the grouping off the bubbles. So I know that the distribution of the bubble clusters is correct. I just need to accurately add text near each cluster.