Question

D3.js从csv文件生成的

表（成功）加载在正文底部和scripts标记下方。因此，我无法选择用于添加ID，类和更多内容的表

我尝试在html中添加一个具有所需ID和类的表标签，并强行附加到该表标签，但是我在html中的表标签中插入了新生成的表，因此仍然无法选择。

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

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

Answer 1

尝试仅选择现有表，而不是选择并将其附加到DOM：

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

希望有帮助。

D3.js csv到html表

1 个答案: