交叉过滤器维度计数的 DC.js 直方图

Question

我有一个交叉过滤器，输入了以下数据结构。

project | subproject | cost
data = [
["PrA", "SubPr1", 100],
["PrA", "SubPr2", 150],
["PrA", "SubPr3", 100],
["PrB", "SubPr4", 300],
["PrB", "SubPr5", 500],
["PrC", "SubPr6", 450]]

我可以创建一个包含每个项目总成本的条形图：

var ndx = crossfilter(data)
var projDim = ndx.dimension(function(d){return d.project;});
var projGroup = costDim.group().reduceSum(function(d){return d.budget;});

我想要做的是按项目成本创建一个 dc.js 直方图...所以 {450: 2, 300: 1} 等。据我所知，crossfilter 只能有每一行的属性维度的输入。有没有解决的办法？

Answer 1

接受挑战！

确实，crossfilter 不支持这种双重缩减，但如果您愿意接受效率的轻微损失，您可以创建具有所需行为的“假尺寸”和“fake groups”。幸运的是，dc.js 并没有使用太多的 crossfilter API，因此您不必实现太多方法。

技巧的第一部分是复制维度和组，以便新维度和旧维度相互观察过滤。

第二部分是创建假组和维度，它们遍历复制组的 bin，并根据值而不是键重新组合和重新过滤。

一般解决方案的开始如下。对于某些图表，还需要实现group.top()，通常只需将其转发到group.all()即可。

function values_dimension(dim, group) {
    return {
        filter: function(v) {
            if(v !== null)
                throw new Error("don't know how to do this!");
            return dim.filter(null);
        },
        filterFunction: function(f) {
            var f2 = [];
            group.all().forEach(function(kv) {
                if(f(kv.value))
                    f2.push(kv.key);
            });
            dim.filterFunction(function(k) {
                return f2.indexOf(k) >= 0;
            });
            return this;
        }
    };
}

function values_group(group) {
    return {
        all: function() {
            var byv = [];
            group.all().forEach(function(kv) {
                if(kv.value === 0)
                    return;
                byv[kv.value] = (byv[kv.value] || 0) + 1;
            });
            var all2 = [];
            byv.forEach(function(d, i) {
                all2.push({key: i, value: d});
            });
            return all2;
        }
    };
}

// duplicate the dimension & group so each will observe filtering on the other
var projDim2 = ndx.dimension(function(d){return d.project;});
var projGroup2 = projDim2.group().reduceSum(function(d){return d.budget;});
var countBudgetDim = values_dimension(projDim2, projGroup2),
    countBudgetGroup = values_group(projGroup2);

jsfiddle 在这里：http://jsfiddle.net/gordonwoodhull/55zf7L1L/

Answer 2

JSFillde Link

非规范化 + Map-reduce。请注意，数据已经将每个项目的成本包括在第 4 列（这可以很容易地预先计算）。这是一个 hack，但希望是一个简单的方法，以便让 DC.js 和 crossfilter 工作而无需太多更改。

var data = [
    ["PrA", "SubPr1", 100, 450],
    ["PrA", "SubPr2", 150, 450],
    ["PrA", "SubPr3", 200, 450],
    ["PrB", "SubPr4", 300, 800],
    ["PrB", "SubPr5", 500, 800],
    ["PrC", "SubPr6", 450, 450]
];

var newdata = data.map(function (d) {
    return {
        project: d[0],
        subproject: d[1],
        budget: d[2],
        cost: d[3]
    };
})

var ndx = crossfilter(newdata),
    costDim = ndx.dimension(function (d) {
        return d.cost;
    }),

    visitedProj = {},
    costGroup = costDim.group().reduce(function (p, v) {

        if (visitedProj[v.project]) return p;
        console.info(v.project);
        visitedProj[v.project] = true;
        return p + 1;
    }, null, function () {
        return 0;
    });

dc.rowChart("#costChart")
    .renderLabel(true)
    .dimension(costDim)
    .group(costGroup)
    .xAxis().ticks(2);

dc.renderAll();

Map-Reduce 功能非常强大，可以从here 访问 API。 JSFillde Link