在D3中创建HTML表时,如何创建第一列

时间:2017-10-11 12:52:34

标签: javascript d3.js

D3版本4,我从CSV文件生成此表,我希望行标题为t,行的其余部分为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]};
                });

感谢帮助,谢谢。

1 个答案:

答案 0 :(得分: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>