当创建在D3的HTML表格，我怎么能做出个

Question

D3版本4，我从一个CSV文件生成此表，我想行标题是次的与该行的其余部分将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>