Trabajando con d3.js , estoy tratando de crear un conjunto de nodos, agregar un circle SVG y un elemento de text a cada nodo y luego volver a colocar el elemento de texto (establecer sus atributos dx y dy ). Específicamente, me gustaría centrar el elemento de texto dentro del SVG.

En mi implementación actual, los elementos SVG se crean/agregan primero, luego estoy iterando sobre los nodos por segunda vez para medir cada elemento de texto y transformarlo en consecuencia:

 /////////////////////////////////////// // Create node elements from data... // /////////////////////////////////////// const canvas = document.getElementById("canvas"); const data_nodes = state.data.nodes; const elements = canvas.svg .append("g") .attr("class", "nodes") ////// .selectAll(".node") // <— create empty selection .data(data_nodes) .enter() ////// .append("svg") // <— added nested SVG .attr("class", "node"); //////////////////////////////// // ...append circle & text... // //////////////////////////////// elements.append("circle").attr("r", (data) => data.size / 2); elements.append("text").text((data) => data.text.content) //////////////////// // ...center text // //////////////////// for (let node of elements.nodes()) { const textEl = node.querySelector("text"); const width = textEl.getBoundingClientRect().width; const height = textEl.getBoundingClientRect().height; ////// textEl.setAttribute("dx", (width / 2) * -1); textEl.setAttribute("dy", height / 2); }

Esto funciona, pero me pregunto si es posible hacer referencia al nodo DOM correspondiente a cada elemento de texto agregado mientras/después de agregarlo y configurar dinámicamente dx / dy entonces.