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的多值组和最大缩减器来计算单个桶中功率曲线上每个窗口的最大值，然后创建一个假组来制作它似乎每个窗口都是它自己的组＆＃34;桶＆＃34;。

首先定义维度，一些辅助贴图（需要进入线性刻度，因此需要将窗口转换为秒数），以及可用于在事件中过滤的辅助维度你想这样做：

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)

最后你创建了你的假团体。您需要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/

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

1 个答案: