D3.js csv到html表

Posted 2021-03-28

表（已成功）由D3.js生成的csv文件加载在body的底部和脚本标签下方。因此，我无法选择用于添加id，类等的表

我尝试在html中添加一个带有我需要的id和类的表标签，并强制追加到那个，但我在html中得到了新生成的表INSIDE表标签，所以仍然无法选择。

var tabulate = function (data,columns) {
    var table = d3.select('#myTable') // this is the solution
 // var table = d3.select('body').append('table') this was before the solution
      var thead = table.append('thead')
      var tbody = table.append('tbody')


      thead.append('tr')
        .selectAll('th')
          .data(columns)
          .enter()
        .append('th')
          .text(function (d) { return d })

      var rows = tbody.selectAll('tr')
          .data(data)
          .enter()
        .append('tr')

      var cells = rows.selectAll('td')
          .data(function(row) {
              return columns.map(function (column) {
                  return { column: column, value: row[column] }
            })
        })
        .enter()
      .append('td')
        .text(function (d) { return d.value })

    return table;
  }
  d3.csv('data/Inventory.csv')
  .then(function(data) {
    const columns = ['Environment','vCluster','HostName','HostModel','BiosVersion','BiosDate','OSversion','HBAadapter','HBAdriver','HBAfirmware','NICadapter','NICfirmware','NICdriver','HPiLOversion','HPiLOfirmware','OAfirmware']
    tabulate(data,columns)
  });

我需要将生成的表作为元素正确创建，因此它是可选择且可行的。

答案

尝试选择现有的表而不是选择AND将其附加到DOM：

var table = d3.select('#mytable');

希望能帮助到你。