如何使用crossfilter和dc.js过滤,分组和绘制数据

时间:2014-08-04 17:26:51

标签: javascript jquery dc.js crossfilter

我有以下数据和计数条形图。这是jsfiddle。我想过滤尺寸,所以在条形图中我只有Alyssa和Bob。我尝试了使用.filter()函数创建过滤变量的不同变体,并直接过滤图表。主要问题似乎是XDimension.group().reduceCount,因为显然"组方法只考虑满足每个过滤器的记录,除了这个维度的过滤器。"我搞不清楚了。帮助赞赏。

var data = [{
    Owner: "Alyssa",
    ID: "A"
}, {
    Owner: "Alyssa",
    ID: "A"
}, {
    Owner: "Alyssa",
    ID: "A"
}, {
    Owner: "Alyssa",
    ID: "A"
}, {
    Owner: "Alyssa",
    ID: "B"
}, {
    Owner: "Bob",
    ID: "A"
}, {
    Owner: "Bob",
    ID: "A"
}, {
    Owner: "Bob",
    ID: "C"
}, {
    Owner: "Bob",
    ID: "C"
}, {
    Owner: "Bob",
    ID: "C"
}, {
    Owner: "Bob",
    ID: "C"
}, {
    Owner: "Bob",
    ID: "C"
}, {
    Owner: "Bob",
    ID: "D"
}, {
    Owner: "Joe",
    ID: "A"
}, {
    Owner: "Joe",
    ID: "A"
}, {
    Owner: "Joe",
    ID: "D"
}, {
    Owner: "Joe",
    ID: "D"
}, {
    Owner: "Joe",
    ID: "E"
}];

var ndx = crossfilter(data);


var XDimension = ndx.dimension(function (d) {
    return d.Owner;
});
var YDimension = XDimension.group().reduceCount(function (d) {
    return d.Owner;
});
dc.barChart("#Chart")
    .width(480).height(300)
    .dimension(XDimension)
    .group(YDimension)
    .centerBar(true)
    .gap(56)
    .x(d3.scale.ordinal().domain(XDimension))
    .xUnits(dc.units.ordinal)
    .xAxisLabel("Market Developer")
    .yAxisLabel("Unique Counts")
    .elasticY(true)
    .xAxis().tickFormat(function (v) {
    return v;
});
dc.renderAll();

1 个答案:

答案 0 :(得分:1)

在将数据添加到交叉过滤器之前是否可以过滤数据?

data = data.filter(function (d) { return d.Owner !== "Joe"; });
var ndx = crossfilter(data);

我目前正在研究类似的问题,这是一个临时解决方案。我试着像这样过滤维度:

var filtered = XDimension.filter(function (d) { return d !== "Joe"; });
var YDimension = filtered.group().reduceCount(function (d) { return d.Owner });

当我打印出“已过滤”时,我看到维度已正确过滤。但是,在绘制图表时,“Joe”仍在数据集中。

如果我找到更好的解决方案,我会发回信息。