Binding data not working in d3.js

Question

I am trying to create html using the .enter method.

I have the following code:

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

The first warning displays "1", so the object is correctly selected. The second line does not add the "li" elements inside my DOM object.

What am I doing wrong? Thanks

+3

Tony May 22, '12 at 15:35

1 answer

Felix kling · Accepted Answer · 2012-05-22T15:39:35+0000

First you need to create a (empty) selection of elements li:

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

You then associate the data with this empty selection, which will generate placeholders in the selection for the new data.

So you basically say:

"Select all the elements liand bind data to them [4, 8, 15]. For all data elements that are not yet bound, create a new element li."