Как отлаживать вызов data() в D3?

Question

Я triying с этим примером кода, но это не правильно:

var aaa = ["a","b","c"]; 
d3.selectAll(".none").data(aaa).enter().call(function(d) {console.log(d);}); 

или

var aaa = ["a","b","c"]; 
d3.selectAll("html").data(aaa).enter().call(function(d) {console.log(d);}); 

Answer 1

D3 позволяет связать произвольные данные в объектной модели документа (DOM), а затем применить данные -приведенные преобразования в документ.

Вы должны инициировать данные присоединиться определяя выбор, к которому мы присоединимся данные с:

var bar = chart.selectAll("div"); 

После, необходимо присоединиться данные (определенные ранее) к выбору с помощью selection.data.

var barUpdate = bar.data(data); 

Но выбор пуст, поэтому вам нужно создать экземпляр этих отсутствующих элементов, добавив к выбору ввода.

var barEnter = barUpdate.enter().append("div"); 

Таким образом, вы создадите один объект DOM на данные. Вы можете установить любой атрибут, который вы хотите (класс, id, ...) соответствующего значения данных, d.

barEnter.attr("class", function(d) { return d * 10 + "px"; }); 

Что касается вашего вопроса, вы можете отлаживать ваши данные при создании каждого объекта для каждого типа данных, как это:

var Viz = d3.select(".myViz") 
      .selectAll("div") 
      .data(aaa) 
      .enter().append("div") 
      .attr("class", function(d) { console.log(d); }); 

Надеется, что это помогает.