簡單號碼顯示從reduceCount與dc.js

我開始與dc，我轉過身來幾天關於我不能做的一件簡單的事情。我有一個這種結構的經典數據樣本： {date：「2011-11-14T16：17：54Z」，quantity：2，total：190，tips：100，type：「tab」} 只是想顯示不同種類的付款的數量。有3個。我可以在控制檯中顯示它，但不能顯示在圖表中。我嘗試了很多不同的東西，但都沒有工作。我有一些與reduceSum一起工作，但不與reduceCount，對象的結構似乎是不同的。感謝您的幫助簡單號碼顯示從reduceCount與dc.js

這是我的代碼：

<!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>

來源

2017-06-12 François

通常情況下，numberDisplay期待展現聚集的結果 - 所以，如果它給一個groupAll對象，它會調用groupAll.value()。或者如果給定一個普通的組，它將調用group.all()，然後根據chart.ordering()函數選擇最高的一個。

顯示垃圾箱的數量是一個稍微不同的問題，我懷疑這是你遇到麻煩的地方。（我無法解釋爲什麼有些東西會爲reduceSum但不reduceCount工作，因爲那些應該產生的結果相同的形狀。）

我建議使用一個「假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

來源

2017-06-12 19:23:30 Gordon

非常感謝戈登。它以這種方式工作。這不是最直觀的，但它使工作。順便說一下，也請感謝scala-like synthax x => x，而不是詳細的java-like類型。我很喜歡。 –

簡單號碼顯示從reduceCount與dc.js

回答

相關問題