来自组的多个号码显示

Question

使用以下数据，我如何按类列（高，中，低）和值总计

以这种形式显示每个总数都有自己的dc.numberDisplay？

Answer 1

嗯，这非常接近。

由于数字显示只显示一个数字，因此我们需要为要显示的每个值生成div。

首先，通常的crossfilter东西，创建一个按类分类的组：

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; });

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

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();

下面的截图。

小提琴：http://jsfiddle.net/aw9h8d93/9/