El tutorial o código que hallarás en este artículo es la resolución más sencilla y válida que hallamos a esta inquietud o problema.
Solución:
yo usaría getComputedTextLength para medir el texto. No sé si hay un equivalente para esto en D3.js. Mi respuesta es usar javascript simple y supone que rect y el centro de texto son x: 50, y: 25 y estás usando textdominant-baseline:middle;text-anchor:middle;
let text_length = txt.getComputedTextLength();
rct.setAttributeNS(null,"width",text_length )
rct.setAttributeNS(null,"x",(50 - text_length/2) )svgborder:1px solid
textdominant-baseline:middle;text-anchor:middle;Alternativamente en lugar de txt.getComputedTextLength() puedes utilizar txt.textLength.baseVal.value
La solución es bastante simple cuando recuerdas que el this vinculante en el attr() la llamada se refiere al elemento HTML (SVG) asociado:
rects.attr("width",
d => this.parentNode.childNodes[1].getComputedTextLength() + 20;
);
Rect es el primer elemento de una lista de elementos SVG que componen el nodo que se va a mostrar. El texto para ese nodo está en el índice 1 (como sigue del append llamadas).
Si te apasiona este mundo, tienes la opción de dejar un tutorial acerca de qué le añadirías a esta sección.