tengo una función que acepta diferentes conjuntos de datos y dibuja un mapa de árbol usando d3.js

la estructura requiere un elemento ag con un rect y texto en él, por lo que para cada nodo de datos hay un elemento ag para agrupar rect y text y uso join() para mantener los elementos en la pantalla vinculados a los conjuntos de datos que paso

extrañamente cuando se ejecuta algo como:

 svg.selectAll("g").data(myDataArray).join("g").append("rect")

funciona bien y g se une a los nodos myDataArray excepto el primer g

el primer g nunca cambia, sino que se llena con elementos rectos cada vez que paso un myDataArray diferente y el resto de los elementos g simplemente funcionan según lo previsto y muestran los nuevos datos en ellos y el antiguo se elimina excepto el primer elemento por otro lado cuando lo pruebo usando otros elementos digo que hago esto:

 svg.selectAll("div").data(myDataArray).join("div").append("h1");

todo funciona según lo previsto y cada nodo de datos obtiene un div con h1 dentro que muestra los datos y también el primer div actualiza su h1 a diferencia del primer elemento g que sigue agregando elementos rect dentro cada vez que se cambia myDataArray . He intentado de muchas maneras diferentes para depurar, pero no pude entender por qué sucede esto en g elementos pero no en otro tipo de contenedores