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：

私はこのようになりますフラットなサイクリングデータを持っています）をディメンションとして使用し、値は各カテゴリのアクティビティで見つかった最大値になります。これは、高い値（w15sec）から低い値（w1hr）になる折れ線グラフのように見えます。

この画像のようになります。

あなたの助けのおかげそんなに！

Answer 1

私はこれにアプローチする最善の方法は、Reductioのマルチバリューグループと最大レデューサーを使って1つのバケットでパワーカーブの各ウィンドウの最大値を計算し、これらのウィンドウの中には、独自のグループ "バケット"があります。

ディメンション、いくつかのヘルパーマップ（リニアスケールにする必要があるため、ウィンドウを秒数に変換する必要があります）、イベントでフィルタリングに使用できるヘルパーディメンション

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) 

あなたはその後、Reductioを使用してグループを作成し、各ウィンドウの最大の計算：

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) 

そして最後に、あなたの偽のグループを作成するには、これをやってみたいこと。

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) 

の更新バージョンをされた折れ線グラフは、いくつかの理由のためにそれらを必要とするため、あなたは両方topとall必要http://jsfiddle.net/fb3wsyck/5/