dc.js rowChart 按最大键过滤

Question

我有一个仪表板，其中显示随时间变化的人数。一个是显示随时间变化的人数的折线图，另一个是按 HCLevel1 拆分的行图 - 仅供用户过滤。

我希望 rowChart 在日期过滤器中显示最新时期的头像（而不是显示整个时期的头像总数，这是错误的）。

我可以通过将两个字段组合成一个维度来做到这一点，但问题是当我使用 rowChart 按业务过滤时，我在折线图中只看到一个月 - 而我想查看过滤后的完整期间。我无法弄清楚如何使用假组执行此操作，因为 rowChart 的 dimension/key 是 HCLevel1.

我的数据格式如下：

var data =  = [
{
  "HCLevel1": "Commercial",
  "HCLevel2": "Portfolio TH",
  "Period": 201407,
  "Heads": 720
},

我已经尝试使用此自定义归约（从另一个 SO 问题中获取）但它无法正常工作（负值、不正确的值等）。

function reduceAddAvgPeriods(p, v) {
    if (v.Period in p.periodsArray) {
        p.periodsArray[v.Period] += v.Heads;
    } else {
        p.periodsArray[v.Period] = 0;
        p.periodCount++;
    }
    p.heads += v.Heads;
    return p;
}

目前，我的 jsfiddle 示例正在为维度组合 2 个字段，但如您所见，我无法使用 rowChart 进行过滤以在折线图上显示完整周期。

我可以使用 reductio 得到平均值，但我想提供最近过滤日期的实际 Heads 值。

https://jsfiddle.net/kevinelphick/4ybekqey/3/

我希望这是可能的，任何帮助将不胜感激，谢谢！

Answer 1

我几天前看过这个，但我花了一点时间才弄明白。棘手！

我们可以通过考虑这两个事实来限制设计：

我们想按"Level"筛选行图。简直了

var dimLevel = cf.dimension(function (d) { return d.HCLevel1 || ''; });

A group does not observe its own dimension's filters. 所以我们可能想使用#1 中的维度来为行图生成数据（组）。

考虑到这两个限制，也许我们可以按级别进行维度和分组，但在组的 bin 内，跟踪对该 bin 有贡献的时间段？

这是常用于stacked charts的常见模式：

var levelPeriodGroup = dimLevel.group().reduce(
    function(p, v) {
        p[v.Period] = (p[v.Period] || 0) + v.Heads;
        return p;
    },
    function(p, v) {
        p[v.Period] -= v.Heads;
        return p;
    },
    function() {
        return {};
    }
);

在这里，我们只 'peel off' 顶部堆栈，删除任何零：

function last_period(group, maxPeriod) {
    return {
        all: function() {
            var max = maxPeriod();
            return group.all().map(function(kv) {
                return {key: kv.key, value: kv.value[max]};
            }).filter(function(kv) {
                return kv.value > 0;
            });
        }
    };
}

为了使 last_period 更通用，maxPeriod 现在是一个函数，我们将这样定义它：

function max_period() {
    return dimPeriod.top(1)[0].Period;
}

将它们放在一起并提供给行图：

rowChart
    .group(last_period(levelPeriodGroup, max_period))
    .dimension(dimLevel)
    .elasticX(true);

由于句点不再是图表标签的一部分，我们可以将其放在标题中：

<h4>Last Period: <span id="last-period"></span></h4>

并在绘制折线图时更新它：

rowChart.on('pretransition', function(chart) {
    d3.select('#last-period').text(max_period());
});

dc.js rowChart 按最大键过滤

dc.js rowChart to Filter by max key

crossfilter

dc.js