javascript - 使用D3生成基本表时tbody标签元素返回空

Question

我正在尝试使用 D3 从外部 json 文件读取来生成一个表，同时将参数“fieldNamesUnique”传递给该函数。该函数执行时没有错误，但 tbody 标记为空。

这是 JSON 数据:

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

这是 d3 代码

        function testFunction(fieldNamesUnique) {
            data = d3.json('json/dataQualityIssuesCategory.json')
            tabulate(data, ['Category', 'Count']);  

            }
          function tabulate(data, columns) {
                var table = d3.select('#response').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;
        }

结果如下: page source

有人可以帮我找出为什么 tbody 标签为空吗？

Answer 1

d3.json 不返回任何内容(从技术上讲，它返回与请求相关的对象)。

因此，您不能这样做:

data = d3.json('json/dataQualityIssuesCategory.json')

取而代之的是，data 必须是回调中的参数:

d3.json("dataQualityIssuesCategory.json", function(data){
    //parameter here -------------------------------^
    //code using 'data' here
});

这是一个包含您的代码的骗子:https://plnkr.co/edit/jJQHWSz0wvQkWFqULq7t?p=preview

PS:我仅回答您的问题(“为什么 tbody 标记为空？”)。从结果中可以看出，您的代码存在一些问题，这些问题不属于本问题的范围。