绑定数据在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",因此正确选择了de object.第二行不会在我的DOM对象中附加"li"元素.

我究竟做错了什么？谢谢

Answer 1

您必须首先创建(空)li元素选择:

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

然后将数据绑定到该空选择,这将在选择新数据时生成占位符.

所以你基本上是这样说的:

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

DEMO