Tengo este grupo de burbujas.

Y estoy tratando de agregar un svg: texto en el centro superior de cada grupo. El problema es que no tengo forma de obtener la altura de cada grupo. No tengo problema en conseguir el centro.

Intenté obtener la burbuja de altura máxima en cada grupo después de que finaliza la simulación:

 .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. });

El problema es que es lento, ya que tengo que esperar a que termine la simulación. También es un poco inexacto.

Puedo adivinar la altura, pero esa nunca es la forma correcta de abordar los datos dinámicos.

ejemplo ideal de texto:

Cualquier ayuda sería útil.

nota al margen: creé los datos y la agrupación de las burbujas. Entonces sé que la distribución de los grupos de burbujas es correcta. Solo necesito agregar texto con precisión cerca de cada grupo.