使用分組酒吧與DC.js

我使用的是grouped bar PR of dc.js和相應的grouped bar chart example作爲基線。使用分組酒吧與DC.js

出於某種原因，我有我的數據使用數字，而不是字符串。（將「男性」和「女性」轉換爲1/0）。我猜測它與我使用的減少功能有關。當然，這也會影響我的x軸標籤。我寧願他們顯示文本的變化。

ndx = crossfilter(eData), 
groupDim = ndx.dimension(function(d) {return d.service;}), 
qtySumGroup = groupDim.group().reduce(
    function(p,v) { p[v.component] = (p[v.component] || 0) + v.qty; return p; }, 
    function(p,v) { p[v.component] = (p[v.component] || 0) - v.qty; return p; }, 
    function() { return{}; });

我也注意到，它似乎沒有交叉篩選數據。當我點擊一個組中的一個欄時，它不會過濾頁面上的其他圖表。我錯過了什麼？

來源

2017-02-05 carbonisle

請您澄清性別問題嗎？你的演示似乎是使用「男性」和「女性」好嗎？ – Gordon

我的歉意。問題出在分組條形圖上。如果你看看我的代碼，你會看到一個註釋掉的部分，它顯示了一組不同的數據。在哪裏[服務] =「有效」「警衛」或「預留」。如果我使用該數據而不是活動數據（將活動/保護/儲備轉換爲1/2/3），則圖表不會呈現。（我的原始問題將服務更改爲性別來簡化問題） – carbonisle

同樣，在分組條形圖上，如果單擊一個條（第一個藍色代表軍隊和活動，但單擊它不會導致任何其他圖表過濾 – carbonisle

這是答案的第一部分。爲了使用字符串組件/性別進行分組，您需要調整爲「堆棧」選擇數據的方式（實際上在使用此版本的dc.js時進行分組）。

var components = Object.keys(etsData.reduce(function(p, v) { 
     p[v.component] = 1; 
     return p; 
    }, {}));

此生成的對象，其中鍵是組件名稱，然後再換隻是鍵作爲數組：

因此，可以通過第一走數據和抓取部件抓取組件名稱。

然後我們使用components選擇類別，像這樣：

grpChart 
     .group(qtySumGroup, components[0], sel_stack(components[0])); 

for(var i=1; i<components.length; ++i) 
    grpChart.stack(qtySumGroup, components[i], sel_stack(components[i]));

這僅僅是和原來一樣

grpChart 
     .group(qtySumGroup, "1", sel_stack('1')); 

for(var i=2; i<6; ++i) 
    grpChart.stack(qtySumGroup, ''+i, sel_stack(i));

，除了它是由字符串，而不是整數索引。

我知道這不是你的問題的重要組成部分，但不幸的是filtering by stack segments is not currently supported in dc.js。如果我有時間，我會嘗試在今天晚些時候返回該部分 - 應該可以在使用具有複合鍵（或使用兩個維度）和自定義單擊事件的維度中對其進行破解，但我沒有看到任何人嘗試這還沒有。

這無疑是一個有用的功能添加到dc.js，即使只是作爲一個外部定製。

編輯：我添加了an example of filtering the segments of a stack，這應該同樣適用於分組吧（雖然我還沒有與您的代碼試了一下）。該技術是explained in the relevant dc.js issue。

來源

2017-02-05 19:11:15 Gordon

也就是說。 – carbonisle

並且，如果可以的話，那麼通過棧段進行篩選將成爲我需要的最後一塊。 – carbonisle

如果還不算太晚，我已經創建了一個過濾堆棧的示例，它應該適用於您以上鍊接 – Gordon

使用分組酒吧與DC.js

回答

相關問題