在D3JS的退出表中追加行

Question

I have the below code ,I am trying to add a row to an existing table using D3js ,but somehow it is not working .Trying to figure out if I have missed some thing .I first take the table ,then take all rows and then append TD to it.Below is the code ,can someone please advice if I have missed something here.

 tt=d3.select("#graph1").select("table").select("tbody").selectAll("tr");//Selects rows
  tr=tt.data(data_to_display_status_table).enter().append("tr");//Append a new row to existing table
td = tr .selectAll("td")
                .data(function(d) {
                  console.log("***************************************************");
                  console.log(d); 
                  var json_struct={};
                  json_struct["@timestamp"]=d.timestamp;
                  json_struct["flow_timestamp"]=d.timestamp;
                  json_struct["ip_a"]=d.ip_a;
                  json_struct["port_a"]=d.l4_port_a;
                  json_struct["ip_b"]=d.ip_b;
                  json_struct["service_name"]=d.service_name;
                  json_struct["appliance"]=d.appliance;
                  json_struct["port_b"]=d.l4_port_b;
                  json_struct["flow_id"]=d.flow_id;
                  json_struct["flow_duration"]=d.flow_duration;
                  json_struct["pkts"]=d.pkts;
                  json_struct["percentage_complete"]=d.percentage_complete;
                  var display_data_json=JSON.stringify(json_struct);

                  persistRetrival(display_data_json);
                  var str = d.timestamp + '<br>' + d.ip_a + "(" + d.l4_port_a + ")" + " - " + d.ip_b + "(" + d.l4_port_b + ")" + '<br>' + "Total Packets : " + d.pkts + '<br>' + "Flow Duration : " + d.flow_duration;
                  return [ str,d.percentage_complete+"%"]; })
              .enter().append("td")
                .html(function(d) { return d + "<br/>"; });

 tr.append("td").append("button")
                          .attr("class", "btn btn-warning")
                          .text("Cancel")
                          .on("click", function(d){ return cancelPcap(d); });

          tr.append("td").append("button")
                          .attr("xlink:href", "http://localhost:8080/pcap/file?file=File.pcap")
                          .text("Open")
                          .on("click", function(d){ return openPcap(d); });

Answer 1

You are doing:

tr .selectAll("td")
                .data(function(d) {

                  //your function
                  }).enter()

it should have been an array like below

              tr .selectAll("td")
                .data([1,2,3,4])//some array of objects or function returning an array.
                .enter().append("td")
                .html(function(d) { return d + "<br/>"; });

Here is a minimum working example may be you can compare it with your code and weed out the bug.

Hope this helps!