Данные привязки, не работающие в d3.js

Question

Я пытаюсь сгенерировать html с помощью метода .enter.

У меня есть следующий код:

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

Первые предупреждения отображается «1», так что де правильно выбранный объект. Вторая строка не добавляет элементы «li» внутри моего объекта DOM.

Что я делаю неправильно? Благодаря

Answer 1

Вы должны создать (пустой) выбор li элементов первым:

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

Затем связать данные с этим пустым выбором, который будет генерировать заполнители в отборе новых данных.

Таким образом, вы в основном говорят:

«Выбрать все li элементы и привязки данных [4, 8, 15] к ним для всех элементов данных, которые еще не связаны, создать новый li элемент..»

DEMO