多组numberDisplays

Question

使用下面的数据，我如何按类列(高、中、低)并总计这些值

​

​

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

​

​

Answer 1

好吧，这很近。

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

首先，使用通常的交叉过滤器，创建一个按类打包的组：

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

现在我们需要把单个的值提取出来，就像它们是不同的组一样。我们可以创建一个按索引提取单个值的“假团体”。注意:如果随着时间的推移，组数会发生变化，这是行不通的。但这通常不会发生。

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

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

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

我们将为每个回收箱构建一个div，对其着色，并根据bin的名称添加一个标题，并为背景颜色使用一个颜色数组：

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/