为dc.js动态创建div并实现交叉过滤的仪表板 [英] Dynamic div creation for dc.js and implementing crossfiltered dashboard

问题描述

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

I am creating a generic dashboard where you upload any data -- with any number of columns, one should be able to visualize the bar charts dynamically using dc.js. Till now, I had been creating individual div element for each column (when file column types and count is known). What should I do to make the div creation automatic as per the number of columns of csv file uploaded sothat the charts are created accordingly with crossfilter enabled ?

注意：泛型表示文件可以具有任意数量的列，并且所有都应为条形图。我想要的是-根据列数，它应该在dc.js中实现动态创建条形图（交叉过滤功能-根据csv文件中的列数创建尺寸和组）

Note: Generic means the file can have any number of columns and all should be bar charts. What I want is -- According to the number of columns, it should create dynamically the bar charts as we implement in dc.js(crossfiltered feature -- creating dimensions and group according to the number of columns in the csv file)

推荐答案

我通常只用d3生成div：

I would usually just generate the divs with 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图表选择器，在这里有用。

dc.js charts can be constructed given a parent/root element instead of a selector, useful here.

这篇关于为dc.js动态创建div并实现交叉过滤的仪表板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！