i have a function that accepts different data arrays and draw a treemap using d3.js

the structure require a g element with a rect and text in it so for every data node there is a g element to group rect and text and i use join() to keep the elements on the screen linked to the datasets i pass in

strangly when running something like :

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

it works fine and the g binds to myDataArray nodes except the first g

the first g never changes instead it gets filled with rect elements anytime i pass a different myDataArray and the rest of the g elements just works as intended and gets the new data displayed in them and the old gets removed except the first element on the other hand when i test it using other elements say i do this :

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

every thing works as intended and every data node gets a div with h1 inside showing the data and also the first div update its h1 unlike the first g element that just keep adding rect elements inside it everytime myDataArray gets changed i have tried so many different ways to debug but couldnt understand why this thing happen on g elements but not other type of containers