javascript - D3 如何正确获取json对象内部的键值

Question

我正在尝试根据返回的 json 对象的键值生成列标题。但是，它返回为 [0,1] 而不是 [key[1],key[2]]。

这是我的 json 数据，我尝试使用 D3 获取该对象的键(例如“Label”、“Count”)作为我的列标题，而不是静态插入它。

[
  {
  "Label": "External-Partner-Induced",
  "Count": 9
  },
{
 "Label": "Null",
 "Count": 1
},
{
 "Label": "FCTS-Induced",
 "Count": 66
},
{
 "Label": "EI-Partner-Induced",
 "Count": 78
 }
]

这是我的 d3 代码:

d3.json('dataQualityIssuesCategory.json', function (error,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
    tabulate(data, [d3.keys(data)[0], d3.keys(data)[1]]); // 2 column table
});

制表函数是我尝试获取列标题的关键字段的地方，但上面的代码似乎获取整个对象而不是内部的值。示例:[0,1] 作为列标题，而不是 [Label, Count] :

Answer 1

请注意，data 是对象数组，而不是对象。因此，要获取对象的键，您应该对数组中的对象之一应用 d3.keys 函数。像这样 -

tabulate(data, d3.keys(data[0])); //data[0] is an object, applying d3.keys(data[0]) will return [Label, Count]

var data = [{
    "Label": "External-Partner-Induced",
    "Count": 9
  },
  {
    "Label": "Null",
    "Count": 1
  },
  {
    "Label": "FCTS-Induced",
    "Count": 66
  },
  {
    "Label": "EI-Partner-Induced",
    "Count": 78
  }
];

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
tabulate(data, d3.keys(data[0]));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>