在 D3JS 的退出表中追加行

Append Row in exiting table in D3JS

本文关键字：追加 退出 D3JS      更新时间：2023-09-26

我有下面的代码，我正在尝试使用 D3js 向现有表添加一行，但不知何故它不起作用.试图弄清楚我是否错过了一些东西.我首先拿表格，然后取所有行，然后将TD附加到其中。下面是代码，如果我在这里错过了什么，有人可以建议吗？

 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); });

你正在做：

tr .selectAll("td")
                .data(function(d) {
                  //your function
                  }).enter()

它应该是一个如下所示的数组

              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/>"; });

这是一个最小的工作示例，您可以将其与您的代码进行比较并清除错误。

希望这有帮助！

相关文章：