Не могу добавить таблицу в div - PullRequest
Новая
       5

Не могу добавить таблицу в div

1 голос
/ 14 апреля 2020

Я создал таблицу с использованием библиотеки 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>

но Я получаю сообщение об ошибке: error when I try to append table to div

, хотя мой код похож на тот, что приведен в этом уроке Обучающий курс по d3 js

1 Ответ

4 голосов
/ 14 апреля 2020

Обучающие учебники предназначены для создания заметок заметок. Есть несколько небольших различий между 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()). Вместо этого используйте простую строку тега.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...