DCjs-Crossfilter基於值的分組鍵

我有以下數據集。DCjs-Crossfilter基於值的分組鍵

[{..... att1: a, hits: 2}, 
{..... att1: a, hits: 2}, 
{..... att1: a, hits: 3}, 
{..... att1: b, hits: 2}, 
{..... att1: b, hits: 2}, 
{..... att1: c, hits: 9}, 
]

我想創建柱狀圖，其中x的值將是範圍「0-5」，「5-10」，'10 +」和y的值將是落入在該範圍內的鍵數。即。（'0-5'，1），（'5-10'，2），（'10 +'，0）

來源

2016-08-30 bashhike

創建一個維度，將數據轉換爲與您的存儲桶相匹配的一組序號值。然後在該維度上進行分組。您的小組將計入落入每個存儲桶的記錄數。

var data = [{att1: 'a', hits: 2}, 
    {att1: 'a', hits: 2}, 
    {att1: 'a', hits: 3}, 
    {att1: 'b', hits: 2}, 
    {att1: 'b', hits: 2}, 
    {att1: 'c', hits: 9}, 
]; 
var cf = crossfilter(data); 
var dim = cf.dimension(function(d) { 
    if(d.hits <= 5) return '0-5'; 
    if(d.hits <= 10) return '5-10'; 
    return '10+'; 
}); 
var grp = dim.group(); 
console.log(grp.all());

工作示例（檢查控制檯）：https://jsfiddle.net/esjewett/u10h4xsu/2/

然後你就可以建立在此基礎上你dc.js條形圖。

var barChart = dc.barChart("#bar"); 

barChart.dimension(dim) 
    .group(grp) 
    .x(d3.scale.ordinal().domain(['0-5','5-10','10+'])) 
    .xUnits(dc.units.ordinal); 

dc.renderAll();

例與條形圖：https://jsfiddle.net/esjewett/u10h4xsu/4/

來源

2016-08-30 21:33:47

這個我做了什麼。但是如果你看到結果是錯誤的。如果你看到'a = 5，b = 4，c = 9'的數據集總點擊率，我想按照總點擊率而不是點擊率進行分組，因此我期望的Y值範圍是'（0-5,1），（5-10,2），（10+，0）'。 – bashhike

這將是一個問題。你當然可以使用假組來做這樣的事情，但是在這個圖表上過濾是什麼意思？如果你只是想顯示而不是過濾，然後創建一個假組：https://github.com/dc-js/dc.js/wiki/FAQ#combine-groups –

感謝您的指針！ – bashhike

DCjs-Crossfilter基於值的分組鍵

回答

相關問題