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

Question

我正在创建一个通用仪表板，您可以在其中上传任何数据 -- 具有任意数量的列，应该能够使用 dc.js 动态可视化条形图。到目前为止，我一直在为每一列创建 individual 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 图表可以在给定 parent/root 元素而不是选择器的情况下构建，在这里很有用。

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

Dynamic div creation for dc.js and implementing crossfiltered dashboard

crossfilter

dc.js