使用 D3.js 时 DataTables 中的 Javascript 错误

Question

我在使用 d3.js 和 Datatables 时遇到问题。 我喜欢 DataTables 的渲染，因此我想将它用于必须使用 D3.js 的学校项目。

问题是当我使用 D3.js 创建表时，如 this fiddle 中所示 我有错误

"Uncaught TypeError: Cannot read property 'mData' of undefined"

我认为这是因为当我调用 $('#table').DataTable() 时表尚未创建，但 console.log($('#table ').html()); 显示正确的 html 代码...

我在 Google 上搜索此错误，但相同错误的问题与表的结构有关(缺少 tbody、缺少关闭标记、thead/tbody 中不同的列号等)，但如果我单独放置 html 代码，它按预期工作:fiddle

我不认为这是 Datatables 的错误，因为它可以很好地使用相同的 HTML 代码，所以也许我误解了 D3.js 的某些内容...

提前感谢您提供任何线索

Answer 1

您缺少 <tr>在标题行上:

var thead = d3.select("thead")
  .append("tr") //<-- missing tr
  .selectAll("th")
  .data(d3.keys(stations[0]))
  .enter().append("th").text(function(d) {
    return d
  });

更新fiddle .

在您的工作版本中，浏览器在解析格式错误的 HTML 时会更正它:

<thead>
  <tr><th>name</th> <!-- what the browser actually renders -->
  <th>city</th>
</tr></thead>