如何使用dc.js將數據進行分組而不會丟失交叉過濾功能？

Question

我試圖通過dc.js學習d3，而且我試圖弄清楚如何僅將w15sec，w30sec，...，w1hr，名稱和值分組爲折線圖。當應用過濾器時，我希望它只顯示過濾器參數內的鍛鍊的最大值。這是我的jsfiddle。

我有看起來像這樣的平板循環數據：

var data = [{"TimeStamp":"2017-09-06T12:32:04.183","Duration":3459.518,"Distance":10261,"ActivityID":175508086,"AVGPower":305.5419317525,"w15sec":499.2666666667,"w30sec":479.3333333333,"w1min":470.2666666667,"w2min":441.9416666667,"w5min":417.5166666667,"w10min":410.5616666667,"w20min":342.3141666667,"w40min":306.2033333333,"w1hr":0.0},{"TimeStamp":"2017-09-08T12:07:27.033","Duration":2106.755,"Distance":3152,"ActivityID":175647595,"AVGPower":168.8485158649,"w15sec":375.8666666667,"w30sec":327.7333333333,"w1min":271.1833333333,"w2min":261.6083333333,"w5min":0.0,"w10min":0.0,"w20min":0.0,"w40min":0.0,"w1hr":0.0},{"TimeStamp":"2017-09-07T17:11:51.577","Duration":1792.025,"Distance":4245,"ActivityID":175670859,"AVGPower":244.2495803022,"w15sec":365.2,"w30sec":342.1333333333,"w1min":328.0333333333,"w2min":290.975,"w5min":276.0566666667,"w10min":268.8316666667,"w20min":246.8858333333,"w40min":0.0,"w1hr":0.0},{"TimeStamp":"2017-09-09T10:31:21.107","Duration":15927.885,"Distance":39408,"ActivityID":175971583,"AVGPower":255.0849193803,"w15sec":405.0666666667,"w30sec":389.8666666667,"w1min":367.6666666667,"w2min":350.3916666667,"w5min":318.93,"w10min":300.345,"w20min":281.9883333333,"w40min":259.4733333333,"w1hr":0.0}]; 

的目標是對填充類別的名稱右邊的圖表（w15sec，w30sec，...，w1hr ）作爲維度，並且這些值將是在每個類別的活動中找到的最大值。它看起來像是從高值（w15秒）到低值（w1hr）的折線圖。

它應該看起來像這個圖像。

非常感謝您的幫助！

Answer 1

我認爲最好的方法是使用Reductio的多值組和最大縮減器來計算單個桶中功率曲線上每個窗口的最大值，然後創建一個假組，這些窗口是它自己的組「桶」。

首先定義維度，一些幫助器映射（您需要進入線性刻度，因此需要將窗口轉換爲秒數）以及可用於事件過濾的幫助器維度要做到這一點：

var rmmDim = facts.dimension(function(d) { 
    return true; 
}); 

var timeMap = { 
    "w15sec": 15, 
    "w30sec": 30, 
    "w1min": 60, 
    "w2min": 120, 
    "w5min": 300, 
    "w10min": 600, 
    "w20min": 1200, 
    "w40min": 2400, 
    "w1hr": 3600 
} 

var timeArray = ["w15sec","w30sec","w1min","w2min","w5min","w10min","w20min","w40min","w1hr"].map((d) => timeMap[d]) 

var rmmFilterDim = facts.dimension(function(d) { 
    return timeArray; 
}, true) 

然後創建使用歸謬法您的組，計算最大爲每個窗口：

var rmmGroup = rmmDim.group(); 
var reducer = reductio() 
reducer.value('w15sec') 
    .max((d) => { return d.w15sec; }) 
reducer.value('w30sec') 
    .max((d) => { return d.w30sec; }) 
reducer.value('w1min') 
    .max((d) => { return d.w1min; }) 
reducer.value('w2min') 
    .max((d) => { return d.w2min; }) 
reducer.value('w5min') 
    .max((d) => { return d.w5min; }) 
reducer.value('w10min') 
    .max((d) => { return d.w10min; }) 
reducer.value('w20min') 
    .max((d) => { return d.w20min; }) 
reducer.value('w40min') 
    .max((d) => { return d.w40min; }) 
reducer.value('w1hr') 
    .max((d) => { return d.w1hr; }) 

reducer(rmmGroup) 

最後，你創建你的假組。你既需要top和all因爲線圖要求他們出於某種原因：

var fakeGroup = { 
    all: function() { 
    return ["w15sec","w30sec","w1min","w2min","w5min","w10min","w20min","w40min","w1hr"].map((d) => { 
     return { 
     key: timeMap[d], 
     value: rmmGroup.top(Infinity)[0].value[d] 
     } 
    }) 
    }, 
    top: function() { 
    return ["w15sec","w30sec","w1min","w2min","w5min","w10min","w20min","w40min","w1hr"].map((d) => { 
     return { 
     key: timeMap[d], 
     value: rmmGroup.top(Infinity)[0].value[d] 
     } 
    }) 
    } 
} 

然後你就可以在你的力量分佈圖使用這個假組：

PwrDistChart 
    .width(960) 
    .height(150) 
    .margins({ 
    top: 10, 
    right: 10, 
    bottom: 20, 
    left: 40 
    }) 
    .dimension(rmmFilterDim) 
    .group(fakeGroup) 
    .valueAccessor((d) => { 
    return d.value.max 
    }) 
    .transitionDuration(500) 
    .x(d3.scale.linear().domain([0,3600])) 
    .elasticY(true) 

此處是一個更新版本擺弄所有這些工作：http://jsfiddle.net/fb3wsyck/5/