无法将表格附加到 div答案

【问题标题】：Can't append table to div无法将表格附加到 div
【发布时间】：2020-04-14 19:24:50
【问题描述】：

我使用 d3.js 库创建了一个表，但是当我尝试将表格附加到 div 时，它会报错？

代码：

<head>
<script src="../../d3.min.js"></script>
</head>

<body>

<div id="main">
Hi
</div>

<script>
  const table = d3.create("table");
  const tbody = table.append("tbody");

  var i,j,row;
  for(i=0;i<5;i++){
    row =tbody.append("tr");
    for(j=0;j<3;j++){
      row.append("td").text(`${i},${j}`);
    }
  } 
  console.log(typeof(table));
  console.log(table);

  node =table.node();
  console.log(typeof(node));
  console.log(node);

  d3.select("#main").append(node);


</script>

</body>

</html>

但我得到一个错误：

虽然我的代码类似于本教程中的代码 A tutorial on d3js

【问题讨论】：

你试过d3.select("#main").append(table);吗？我认为node() 是特定于 observablehq 的。
@Mehdi 我肯定试过 d3.select("#main").append(table);首先，但也给了我错误

标签： javascript d3.js dom

【解决方案1】：

Observable 教程旨在创建 Observable 笔记本。 Observable 与在浏览器中运行的常规 D3 之间存在一些小的差异。

话虽如此，您方法中的唯一问题是append 需要带有标签名称的字符串或元素。如果您有一个字符串，只需将其用作append("foo")。但是，如果您有要附加的元素（在您的情况下为table.node()），则必须从函数中返回它。

所以，而不是：

d3.select("#main").append(node);

必须是：

d3.select("#main").append(() => node);

这是您的代码，仅进行了更改：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="main">
  Hi
</div>

<script>
  const table = d3.create("table");
  const tbody = table.append("tbody");

  var i, j, row;
  for (i = 0; i < 5; i++) {
    row = tbody.append("tr");
    for (j = 0; j < 3; j++) {
      row.append("td").text(`${i},${j}`);
    }
  }
  node = table.node();

  d3.select("#main").append(() => node);
</script>

最后，如果您正在为浏览器编写常规脚本，只需放弃 d3.create() 后跟 append(() => selection.node())。请改用简单的标签字符串。

【讨论】：