Dc.js 组中的多个数字显示

有了以下数据，我如何才能按类列（高、中、低）分类并合计值

并在此表单中显示每个总计及其各自的

dc.numberDisplay

---

嗯，这很接近

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

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，根据箱子的名称为其着色并添加一个标题，并使用一组颜色作为背景色：

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

下面是截图

---

还有小提琴：

请不要只包含文本值的屏幕截图，使用文本本身。如果您想要dc.js特定的答案，可能不应该使用d3.js标记。这一标签的受众范围要广得多。我将删除额外的标记，并希望在今天晚些时候回答（尽管这实际上并不简单，因为您正在从数据生成N个数字显示）。谢谢Gordon）这正是我们需要的。