来自组的多个 numberDisplays

Question

使用以下数据，我如何按 class 列（高、中、低）分箱并汇总值

并以这种形式显示每个总数及其自己的 dc.numberDisplay？

Answer 1

好吧，这已经很接近了。

因为数字显示只显示一个数字，所以我们需要为每个要显示的值生成一个div

首先，通常的交叉过滤器，创建一个按 class 分类的组：

var data = d3.csv.parse(d3.select('pre#data').text());
data.forEach(function(d) {
  d.value = +d.value;
})

var cf = crossfilter(data);

var classDim = cf.dimension(function(d) { return d.class; });
var classGroup = classDim.group().reduceSum(function(d) { return d.value; });

现在我们需要将输入的div等值拉出，就好像它们是不同的组一样。我们可以创建一个 "fake group" 来通过索引提取一个 individual 值。注意：如果组数随时间变化，这将不起作用。但这通常不会发生。

function subgroup(group, i) {
  return {
    value: function() {
      return group.all()[i];
    }
  };
}

现在我们需要知道我们感兴趣的每个 bin 的索引：

var bins = ['high', 'middle', 'low'];
var indices = {};
classGroup.all().forEach(function(kv, i) {
  if(bins.indexOf(kv.key) >= 0)
    indices[kv.key] = i;
})

我们将为每个容器构建一个 div，为其着色并根据容器的名称添加标题，并使用一组颜色作为背景颜色：

var colors = ['rgb(219,41,0)', 'rgb(255,143,31)', 'rgb(255,198,82)'];
var display = d3.select('#numbers').selectAll('div').data(bins);
display.enter().append('div')
    .attr('class', 'display')
    .style('background-color', function(d, i) {
      return colors[i];
    })
  .append('span')
    .attr('class', 'heading')
    .text(function(d) { return d.toUpperCase(); });

这里是 CSS 让它看起来大致如上所示：

.display {
  min-width: 100px;
  min-height: 100px;
  text-align: center;
  vertical-align: middle;
  font: 36pt sans-serif;
  line-height: 100px;
  position: relative;
  color: white;
}

.display span.heading {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  margin: auto;
  font: 8pt sans-serif;
  color: white;
}

现在，我们终于可以为每个 div 实际生成 numberDisplay 小部件。这是简单的部分！

display.each(function(d) {
  var numberDisplay = dc.numberDisplay(this)
    .group(subgroup(classGroup, indices[d]))
    .formatNumber(d3.format('d'));
});
dc.renderAll();

截图如下。

和fiddle：http://jsfiddle.net/aw9h8d93/9/

来自组的多个 numberDisplays

multiple numberDisplays from group

dc.js