问题描述
我创建了一个表格，我想将一个特定的列设置为粗体，但不是全部。 现在我的桌子是这样设置的：
d3.csv('all-ages.csv')
.then(function(data) {
function tabulate(data, columns) {
var table = d3.select('body').append('table')
var thead = table.append('thead')
var tbody = table.append('tbody');
// append the header row
thead.append('tr')
.selectAll('th')
.data(columns).enter()
.append('th')
.text(function (column) { return column; });
// 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]};
});
})
.enter()
.append('td')
.text(function (d) { return d.value; });
return table;
}
// render the table(s)
tabulate(data, ['Major', 'Major_category', 'Employed', 'Unemployed', 'Unemployment_rate']); //
})
.catch(function(error){
console.log(error);
})
谁能帮我这个？ 我曾尝试在网上查找，但到目前为止还没有结果。 为了记录，我想加粗的列是“Unemployment_rate”
1楼
Gerardo Furtado
1
已采纳
2019-02-21 01:49:49
给定您的代码， cells选择的数据包含一个名为column的属性，您可以使用它来选择该特定列。
例如，使用font-weight ：
.style("font-weight", function(d) {
return d.column === "Unemployment_rate" ? 700 : 300;
})
这是一个带有虚假数据的演示：
var csv = `Major,Major_category,Employed,Unemployed,Unemployment_rate 12,13,14,16,18 43,22,33,54,66 76,22,121,54,77 88,22,33,11,10 17,88,21,17,42`; var data = d3.csvParse(csv); function tabulate(data, columns) { var table = d3.select('body').append('table') var thead = table.append('thead') var tbody = table.append('tbody'); // append the header row thead.append('tr') .selectAll('th') .data(columns).enter() .append('th') .text(function(column) { return column; }); // 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] }; }); }) .enter() .append('td') .style("font-weight", function(d) { return d.column === "Unemployment_rate" ? 700 : 300; }) .text(function(d) { return d.value; }); return table; } // render the table(s) tabulate(data, ['Major', 'Major_category', 'Employed', 'Unemployed', 'Unemployment_rate']); //
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
PS ：您不需要对列进行硬编码， d3.csv自动在名为columns的数据数组中创建一个属性。
检查这个：
var csv = `Major,Major_category,Employed,Unemployed,Unemployment_rate 12,13,14,16,18 43,22,33,54,66 76,22,121,54,77 88,22,33,11,10 17,88,21,17,42`; var data = d3.csvParse(csv); console.log(data.columns)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>