Question

我已经创建了一个表，但我想将一个特定的列设置为粗体，但不是全部。现在，我的桌子设置如下：

 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”

Answer 1

给出您的代码，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>

使html表中的特定列为粗体

1 个答案: