Function generating HTML table does not create <td> elements the first time

Question

I made a function generating a table based on the element you click on:

.on("click", function(d, i) {
                        table1title = "Sources for " + d.key + " in Warehouse " + d.values["0"].Warehouse + " :" ;
                        selecteddata = [];

                        columns = ["Country", "Amount(KG)", "Frequency", "Delivery by"];

                        for(i=0; i<d.values.length; i++){
                            selecteddata.push(
                                [
                                    d.values[i].Country,
                                    d.values[i]["Amount (kg)"],
                                    d.values[i].Frequency,
                                    d.values[i]["Delivered by"]
                                ]
                            )
                        }

                        genTable1();

                        })

 function genTable1(){

                    columnrow.selectAll("th")
                        .data(columns)
                        .enter()
                        .append("th")
                        .text(function (d){return d});

                    table1header.text(table1title);

                    var rowsTable1 = 
 bodyTable1.selectAll("tr").data(selecteddata);

                    rowsTable1.exit().remove();

                    rowsTable1.enter().append("tr");

                    var cellsTable1 = rowsTable1.selectAll("td")
                        .data(function(selecteddata){
                            console.log(selecteddata);
                            return d3.values(selecteddata)})

                    cellsTable1.enter().append("td").text(function(d){return d;})

                    cellsTable1.exit().remove();
                }

So the first time I click on such an element, the table gets generated without problem. The correct amount of <tr> elements get generated, but the <td> elements do not get generated. You see a console.log where I want to generate the <td> elements, the first time I click on something, there is no output to console.

How do I get the elements to be generated the first time round?

Also, another bug is that the first row never gets updated with new values, it stays stuck on the first value it's given…

Answer 1

Ok I managed to figure it out myself (yay). I fixed it using this selection hierarchy:

var cellsTable1 = bodyTable1.selectAll("tr").selectAll("td")
                    .data(function(selecteddata){
                        console.log(selecteddata);
                        return d3.values(selecteddata)})

I always thought that just referencing an object inherits the previously declared hierarchy but I guess it doesn't.

The other bug I also was able to solve. I did .text() while appending, so only newly appended cells got the new text. This was solved like this:

cellsTable1.enter().append("td")

bodyTable1.selectAll("tr").selectAll("td").text(function(d){return d;})

Feels a little bit like a lonely interaction on stackoverflow, but at least I can be proud on myself haha