D3 如何正确获取 json 对象的键值

Question

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

这是我的 json 数据，我正在尝试使用 D3 来获取此对象的键（例如“标签”、“计数”）作为我的列标题，而不是静态插入它。

[
  {
  "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
});

tabulate 函数是我尝试获取列标题的关键字段的地方，但上面的代码似乎获取整个对象而不是 INSIDE 值。 示例： [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>