javascript - 绑定(bind)数据在 d3.js 中不起作用

Question

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

我有以下代码:

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

第一个警报显示“1”，因此正确选择了对象。第二行没有在我的 DOM 对象中附加“li”元素。

我做错了什么？谢谢

Answer 1

您必须先创建一个(空的)li 元素选择:

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

然后您将数据绑定(bind)到该空选择，这将在新数据的选择中生成占位符。

所以你基本上是在说:

“选择所有li元素，并绑定(bind)数据[4, 8, 15]给它们。对于所有尚未绑定(bind)的数据项，创建一个新的 li 元素。”

DEMO