Crossfilter堆积条形图否定了值

Question

我正在使用带有dcv3的crossfilter2

我的数据是在我加载到内存中的csv中

原始数据

Day, ID
1, 2
1, 2
1, 2
2, 5
3, 6
4, 6 

处理过的数据

Day, ID, target
1, 2, True
1, 2, True
1, 2, True
2, 5, False
3, 6, False
4, 6, False 

目前我要做的是创建一个带有2个条的crossfilter stackbar chart。如果ID == 2，我认为它是一个组，ID !=2作为另一组。但是，我不能在DC / crossfilter中动态地执行它，这导致我必须预处理数据以添加新列并处理列，如下面的解决方案所示。

有没有更好的办法？

var dimID = ndx.dimension(function(d) { return d.day; });

var id_stacked = dimID.group().reduce(
function reduceAdd(p, v) {
    p[v.target] = (p[v.target] || 0) + 1;
    return p;
},
function reduceRemove(p, v) {
    p[v.target] = (p[v.target] || 0) - 1;
    return p;
},
function reduceInitial() {
    return {};
    });

//Doing the stacked bar chart here
stackedBarChart.width(1500)
.height(150)
.margins({top: 10, right: 10, bottom: 50, left: 40})
.dimension(dimID)
.group(id_stacked, 'Others', sel_stack("True"))
.stack(id_stacked, 'Eeid of interest', sel_stack("False"))

这是我的sel_stack函数

function sel_stack(i) {
    return function(d) {
        return d.value[i] ? d.value[i] : 0;

    };
}

我正在绘制一个条形图，其中x轴为日，Y轴为叠加条形图中ID == 2或ID!=2的频率

Answer 1

所以你想按天分组，然后按ID===2堆叠。虽然dc.js可以接受许多不同的格式，但通常的技巧是将数据设置为正确的形状。

你是在正确的轨道上，但你不需要额外的列来创建“是2”和“不是2”的堆栈。你可以直接计算：

var dayDimension = ndx.dimension(function(d) { return d.Day; }),
    idStackGroup = dayDimension.group().reduce(
        function add(p, v) {
            ++p[v.ID===2 ? 'is2' : 'not2'];
            return p;
        },
        function remove(p, v) {
            --p[v.ID===2 ? 'is2' : 'not2'];
            return p;
        },
        function init() {
              return {is2: 0, not2: 0};
        });

这些是标准的添加/删除功能，用于减少每个bin的多个值。你会发现other variations where the name of the field is driven by the data。但是在这里我们知道哪些字段将存在，所以我们可以在init中将它们初始化为零，而不用担心遇到新字段。

当将一行添加到交叉过滤器或过滤器更改以便包含行时，将调用add函数;每当过滤掉行或从交叉过滤器中删除行时，都会调用remove函数。由于我们不担心undefined（1），我们可以简单地增加（++）和减少（--）值。

最后，我们需要访问器将这些值从对象中拉出来。我认为将堆栈访问器内联放入更简单 - sel_stack是为添加动态数量的堆栈而编写的。 （YMMV）

  .group(idStackGroup, 'Others', d => d.value.not2)
  .stack(idStackGroup, 'Eeid of interest', d => d.value.is2);

https://jsfiddle.net/gordonwoodhull/fu4w96Lh/23/

（1）如果你对undefined做任何算术，它会对NaN和NaN进行进一步的计算。