为 dc.js 创建动态 div 并实现交叉过滤仪表板

Question

我正在创建一个通用仪表板，您可以在其中上传任何数据——具有任意数量的列，应该能够使用 dc.js 动态地可视化条形图。 到目前为止，我一直在为每一列创建单独的 div 元素（当文件列类型和计数已知时）。我应该怎么做才能根据上传的csv文件的列数自动创建div，以便在启用交叉过滤器的情况下相应地创建图表？

注意：通用意味着文件可以有任意数量的列，并且都应该是条形图。我想要的是——根据列数，它应该像我们在 dc.js 中实现的那样动态创建条形图（交叉过滤功能——根据 csv 文件中的列数创建维度和组）

Answer 1

我通常只用 d3 生成 div：

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 图表可以在给定父/根 元素 而不是选择器的情况下构建，在这里很有用。