Question

我正在尝试使用D3.js和JSON文件创建表。

数据本身由6列组成：代码，名称，单位，价值，目标和规范。该表应仅显示其中三个（名称，目标和值）。我想使用列[code]和[norm]的值来标识“id”和“class”。

我使用的基本代码如下所述。这段代码可以很好地创建表本身 - 除了“id”和“class”标识：

  var data = [{
    "code": 100,
    "name": "A",
    "unit": 12,
    "value": 0.6,
    "target": 0.75,
    "norm": "alert"
  }, {
    "code": 106,
    "name": "B",
    "unit": 12,
    "value": 0.6,
    "target": 0.75,
    "norm": "danger"
  }, {
    "code": 112,
    "name": "C",
    "unit": 12,
    "value": 0.9,
    "target": 0.75,
    "norm": "ok"
  }];

  var columns = ['name', 'target', 'value'];
  var table1 = d3.select('#table').append('table');

  var thead = table1.append('thead');
  var tbody = table1.append('tbody');

  // append the header row
  thead.append('tr')
    .selectAll('th')
    .data(["Name", "Target", "Value"])
    .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')
    .html(function(d) {
      return d.value;
    });

});

我想要的表输出如下所示，其中[code]的JSON值用于标识“id”，[norm]用于“class”。我似乎无法在单元级别使用不用于填充表（td）值的数据元素。我怎样才能做到这一点？

<div id="table">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Target</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="100" class="alert">A</td>
        <td>0.75</td>
        <td>0.6</td>
      </tr>
      <tr>
        <td id="106" class="danger">B</td>
        <td>0.75</td>
        <td>0.6</td>
      </tr>
      <tr>
        <td id="112" class="ok">C</td>
        <td>0.75</td>
        <td>0.9</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

在td的列映射中，您可以添加更多键id和class：

即。

var columns = ['name', 'target', 'value'], column_id = 'code', column_class = 'norm';
 ....   
 ....

return columns.map(function(column) {
            return {
              column: column,
              value: row[column],
              id: row[column_id],
              class: row[column_class]
            };
          });

并将其添加到td，如下所示：

.attr('id', function(d) { return d.column === 'name' ? d.id : null; })
.attr('class', function(d) { return d.column === 'name' ? d.class : null; })

这是一个结合了以上所有内容的片段：

 var data = [{
    "code": 100,
    "name": "A",
    "unit": 12,
    "value": 0.6,
    "target": 0.75,
    "norm": "alert"
  }, {
    "code": 106,
    "name": "B",
    "unit": 12,
    "value": 0.6,
    "target": 0.75,
    "norm": "danger"
  }, {
    "code": 112,
    "name": "C",
    "unit": 12,
    "value": 0.9,
    "target": 0.75,
    "norm": "ok"
  }];

  var columns = ['name', 'target', 'value'], column_id = 'code', column_class = 'norm';
  var table1 = d3.select('#table').append('table');

  var thead = table1.append('thead');
  var tbody = table1.append('tbody');

  // append the header row
  thead.append('tr')
    .selectAll('th')
    .data(["Name", "Target", "Value"])
    .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],
          id: row[column_id],
          class: row[column_class]
        };
      });
    })
    .enter()
    .append('td')
    .attr('id', function(d) { return d.column === 'name' ? d.id : null; })
    .attr('class', function(d) { return d.column === 'name' ? d.class : null; })
    .html(function(d) {
      return d.value;
    });

<script src="https://d3js.org/d3.v4.min.js"></script>


<div id="table">

</div>

希望这会有所帮助。：）

使用基于（隐藏）JSON数据的D3.js创建表

1 个答案: