在D3JS的退出表中追加Row

时间:2016-02-20 01:35:07

标签: javascript d3.js

我有以下代码,我正在尝试使用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); });

1 个答案:

答案 0 :(得分:0)

你在做:

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

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

mosql -c collections.yml --sql postgres://sql-url/sql-db --mongo mongodb://node1,node2,node3/user?replicaSet=rs0 --only-db user --reimport -vvv

以下是最低工作时间example您可以将其与代码进行比较并清除错误。

希望这有帮助!