単純な数値reduceCountからdc.jsを使って表示

私はdcから始めています。私はできない簡単なことについて数日間回ります。 {日付： "2011-11-14T16：17：54Z"、数量：2、合計：190、ヒント：100、タイプ： "タブ"} 私は古典的なデータのサンプルを受け取りました。異なる種類の支払いの種類の数を表示したいだけです。私はコンソールには表示できますが、グラフには表示できません。私はいろいろなことを試みましたが、誰も働いていません。 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

おかげでたくさんのゴードンを。このように動作します。それは最も直感的ではありませんが、それは仕事になります。ところで、冗長なJavaのような型の代わりにscalaのようなシンタックスx => xもありがとう。私はそれを本当に愛しています。 –

単純な数値reduceCountからdc.jsを使って表示

答えて

関連する問題