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]};
});
感谢帮助,谢谢。
答案 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>