如何使用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/