當創建在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>