javascript - 在D3中创建HTML表格时，如何使第一列成为

Question

D3 版本 4，我从 CSV 文件生成此表，我希望行标题为 th，行的其余部分为 td，如下所示:

<tr>
  <th></th><!-- this one to th -->
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>

这是我正在使用的行代码，主要来自堆栈答案:

 // create a row for each object in the data
           var rows = tbody.selectAll('tr')
              .data(data)
              .enter()
              .append('tr');

            // create a cell in each row for each column
            var cells = rows.selectAll('td')
              .data(function (row) {
                return columns.map(function (column) {
                  return {column: column, value: row[column]};
                });

感谢您的帮助，谢谢。

Answer 1

如果您想以不同的方式处理第一列，并使每个元素成为 th 而不是 td，您可以执行如下操作。

var columns = ['variable', 'aror', 'asd', 'maxdd'];

var data = [
  {
    variable: 'Convertible Arbitrage', aror: 0.077, asd: 0.069, maxdd: -0.292,
  },
  {
    variable: 'CTA Global', aror: 0.076, asd: 0.087, maxdd: -0.116,
  },
];


var table = d3.select('body').append('table');
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 rowHeaders = rows.selectAll('th')
  .data(function (row) {
    return [row.variable];
  })
  .enter()
  .append('th')
  .attr('scope', 'row')
  .text(function (d) { return d; });

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

table {
  width: 100%;
  border: 3px solid black;
}

<script src="https://d3js.org/d3.v4.min.js"></script>