如何使用 DC、D3 和 Crossfilter 过滤数据以生成条形图？答案

【问题标题】：How to filter data using DC, D3, and Crossfilter to produce a bar chart?如何使用 DC、D3 和 Crossfilter 过滤数据以生成条形图？
【发布时间】：2014-08-03 23:06:53
【问题描述】：

下面会生成一个条形图，在 x 轴上显示 4 个人，在 y 轴上显示他们的次数。但是我想过滤此数据以仅计算拥有 ID 的所有者的“A”。

此外，是否可以通过按钮或 onClick 处理程序应用此过滤器，以便在按下按钮时仅针对 ID 为“A”过滤数据。

请参阅下面的代码和此处的 jsfiddle：http://jsfiddle.net/chrisguzman/y9xt2/

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();

【问题讨论】：

标签： javascript d3.js dc.js crossfilter

【解决方案1】：

只需根据 ndx 创建另一个维度，并让它返回需要过滤的字段。然后，在 dc.renderAll() 之前，应用 filter() 和要过滤的键。

在此处查看 JS Fiddle：http://jsfiddle.net/chrisguzman/eL2XG/

var ndx = crossfilter(data);


var XDimension = ndx.dimension(function (d) {
    return d.Owner;
});
var YDimension = XDimension.group().reduceCount(function (d) {
    return d.Owner;
});

创建新维度

var FilterDimension = ndx.dimension(function (d) {
    return d.ID;
});

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;
});

然后按该新维度过滤

FilterDimension.filter("A");
dc.renderAll();

另外，请参阅https://groups.google.com/forum/#!msg/dc-js-user-group/UFxvUND7hmY/btbAjqIIzl8J 以获得更深入的解释

这是因为

“分组与交叉过滤器的当前过滤器相交，关联维度的过滤器除外。因此，组方法仅考虑满足除此维度过滤器之外的每个过滤器的记录。因此，如果付款的交叉过滤器按类型和总计过滤，则group by total 仅按类型观察过滤器。”

【讨论】：

【解决方案2】：

我不确定您是否还需要知道如何将其添加到按钮。如果是这样，只需创建一个带有以下锚点的按钮。

<a class="filter" href="javascript:FilterDimension.filter("A");dc.redrawAll();" style="display: none;">filter</a>

<a class="reset" href="javascript:FilterDimension.filterAll();dc.redrawAll();" style="display: none;">reset</a>

【讨论】：