使用 D3 生成基本表时，tbody 标记元素返回空答案

【问题标题】：tbody tag element returns empty when generating basic table using D3使用 D3 生成基本表时，tbody 标记元素返回空
【发布时间】：2017-03-20 23:32:54
【问题描述】：

我正在尝试使用从外部 json 文件读取的 D3 生成一个表，同时将参数“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 标签是空的？

【问题讨论】：

标签： javascript html json d3.js

【解决方案1】：

d3.json 不返回任何内容（从技术上讲，它返回一个与 request 相关的对象）。

因此，你不能这样做：

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 标签是空的？”）。从结果可以看出，您的代码存在一些问题，不在本题讨论范围内。

【讨论】：