Question

我是从DC开始的，而且我已经转了好几天关于一件我无法做到的简单事情。我已经获得了这种结构的付款的经典数据样本： {date：＆＃34; 2011-11-14T16：17：54Z＆＃34;，数量：2，总数：190，小费：100，输入：＆＃34; tab＆＃34;} 我只想显示不同种类的付款的数量。有3.我可以在控制台中显示它，但不能在图表中显示。我尝试了很多不同的东西，但没有一个工作。我有一些使用reduceSum的东西，但没有使用reduceCount，对象的结构似乎有所不同。谢谢你的帮助

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
    <title>Crossfilter</title>
    <script src="crossfilter.js"></script>
    <script src="d3.js"></script>
    <script src="dc.js"></script>
</head>
<body>

<div class="container">
My count :    
<div id="category-count"></div>

<script type="text/javascript">
var payments = crossfilter([
  {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
  {date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
  {date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
  {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
]);

var paymentsByType = payments.dimension(function(d) { return d.type; });
var countType = paymentsByType.group().reduceCount();
console.log(countType.size());

dc.numberDisplay('#category-count')
  .formatNumber(d3.format("d"))
  .group(countType)
  .valueAccessor( function (d) { return d.size(); } );

</script>
</div>
</body>
</html>

Answer 1

通常numberDisplay期望显示聚合的结果 - 因此如果它被赋予groupAll对象，它将调用groupAll.value()。或者，如果它被赋予普通组，它将调用group.all()，然后根据chart.ordering()函数选择最顶层的组。

显示垃圾箱的数量是一个稍微不同的问题，我怀疑这是你遇到麻烦的地方。（我无法解释为什么某些内容适用于reduceSum而不适用reduceCount，因为它们应该产生相同的结果形状。）

我建议使用“假组合”，如下所示：

function bin_counter(group) {
  return {
    value: function() {
      return group.all().length;
    }
  };
}

在将其传递给窗口小部件之前将其应用于组，然后使用身份访问器，因为默认访问者在此处没有用处：

dc.numberDisplay( /* ... */ )
  // ...
  .group(bin_counter(countType))
  .valueAccessor(x => x); // or function(x) { return x; } in ES5

来自reduceCount和dc.js的简单numberDisplay

1 个答案: