Question

我正在创建一个通用仪表板，您可以在其中上传任何数据 - 任意数量的列，一个应该能够使用dc.js动态显示条形图。直到现在，我一直在为每列创建单独的div元素（当文件列类型和计数已知时）。我应该怎样做才能根据上传的csv文件的列数自动创建div，以便在启用了crossfilter的情况下相应地创建图表？

注意：Generic表示文件可以包含任意数量的列，并且所有列都应该是条形图。我想要的是 - 根据列数，它应该动态创建条形图，就像我们在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图表，这里很有用。

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

1 个答案: