使用 dc.js 的 reduceCount 的简单 numberDisplay

Question

我从 dc 开始，为了一件我做不到的简单事情，我花了好几天时间。我有一个具有这种结构的经典付款数据样本： {日期：“2011-11-14T16:17:54Z”，数量：2，总数：190，小费：100，类型："tab"} 我只想显示不同类型付款的数量。有3个。我可以在控制台中显示它，但不能在图表中显示。我尝试了很多不同的方法，但 none 正在工作。我有一些与 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.value() if it's given a groupAll object. Or if it's given an ordinary group it will call group.all() and then choose the top one according to the chart.ordering() 函数。

显示 bin 数量是一个稍微不同的问题，我怀疑这就是您运行遇到麻烦的地方。（我无法解释为什么某些东西适用于 reduceSum 但不适用于 reduceCount，因为它们应该产生相同形状的结果。）

我建议使用 "fake groupAll"，像这样：

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

使用 dc.js 的 reduceCount 的简单 numberDisplay

Simple numberDisplay from reduceCount with dc.js

dc.js