Динамическое создание div для dc.js и реализация кроссфильтрованной панели

Question

Я создаю общую панель инструментов, куда вы загружаете любые данные - с любым количеством столбцов, нужно уметь динамически визуализировать гистограммы, используя dc.js. До сих пор я создавал отдельный элемент div для каждого столбца (когда известны типы и количество столбцов файлов). Что я должен сделать, чтобы сделать создание div автоматическим по количеству загруженных столбцов csv-файла, чтобы диаграммы создавались соответственно с включенным перекрестным фильтром?

Примечание: универсальный означает, что файл может иметь любое количество столбцов, и все должны быть гистограммы. То, что я хочу, - в соответствии с количеством столбцов, он должен динамически создавать столбчатые диаграммы, как мы реализуем в dc.js(перекрестная фильтрация - создание измерений и групп в соответствии с количеством столбцов в файле CSV)

Answer 1

Я обычно просто генерирую div с d3:

var cols = ['col1', 'col2', 'col3'];
var divs = d3.selectAll('div.yourchart').data(cols);
divs.enter().append('div').attr('class', 'yourchart');

var dcCharts = new Array(cols.length);
divs.each(function(col, i) {
  var dimension = cf.dimension(function(d) { return d[col]; });
  var group = dimension.group(); // or however you want to bin them
  var bar = dc.barChart(this) // pass div element as parent/root instead of using selector
      .dimension(dimension)
      .group(group)
      // ...
  dcCharts[i] = bar;
});

Диаграммы dc.js могут быть созданы с учетом родительского / корневого элемента вместо селектора, что полезно здесь.