绑定数据在 d3.js 中不起作用

Binding data not working in d3.js

本文关键字：不起作用 js d3 数据 绑定      更新时间：2023-09-26

我正在尝试使用.enter方法生成html。

我有以下代码：

alert(d3.select(".ul_class").length);
d3.select(".ul_class").data([4, 8, 15]).enter().append("li").text("hello");

第一个警报显示"1"，因此正确选择了 de 对象。第二行不会在我的 DOM 对象中附加"li"元素。

我做错了什么？谢谢

您必须先创建一个(空(li元素选择：

d3.select(".ul_class")
  .selectAll('li') // <--
  .data([4, 8, 15]).enter().append("li").text("hello");

然后，将数据绑定到该空选择，这将在所选内容中为新数据生成占位符。

所以你基本上是在说：

"选择所有li元素并将数据[4, 8, 15]绑定到它们。对于尚未绑定的所有数据项，创建一个新的li元素。

演示

相关文章：