如何使用 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 的多值组和最大缩减器来计算单个桶中功率曲线上每个 window 的最大值，然后创建一个假组以使这些 windows 中的每一个看起来都是它自己的组 "bucket".

您首先定义您的维度、一些辅助地图（您需要进入线性比例，因此您需要将您的 windows 转换为秒数），以及您可以使用的辅助维度用于在您想要执行此操作时进行过滤：

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 创建您的组，计算每个 window:

的最大值

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)

这是 fiddle 的更新版本，其中包含所有这些功能：http://jsfiddle.net/fb3wsyck/5/

如何使用 dc.js 在不丢失交叉过滤器功能的情况下对要过滤的数据进行分组？

How can I group data to be filtered without losing crossfilter functionality using dc.js?

d3.js

dc.js

reductio