如何使用DC，D3和Crossfilter过滤数据以生成条形图？ [英] How to filter data using DC, D3, and Crossfilter to produce a bar chart?

问题描述

下面会生成一个条形图，显示x轴上的4个人以及他们在y轴上显示的次数。但是我想过滤这些数据只计算所有者的身份，如果他们有一个ID A

The following produces a bar chart that shows 4 people on the x axis and the number of times they show up on the y-axis.However I'd like to filter this data to only count the owner's if they have an ID of "A."

此外，是否可以将此过滤器与按钮或onClick处理程序一起应用，以便在按下按钮时仅过滤ID为A的数据。

Also, would it be possible to apply this filter with a button or an onClick handler so that the data is only filtered for ID of "A" upon pressing the button.

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

See code below and jsfiddle here: 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();

推荐答案

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

Simply create another dimension based on ndx and have it return the field that needs to be filtered. Then, before dc.renderAll(), apply filter() and the key to filter by.

请参阅JS Fiddle： http：// jsfiddle。 net / chrisguzman / eL2XG /

See JS Fiddle here: 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 进行更深入的解释

Also, see https://groups.google.com/forum/#!msg/dc-js-user-group/UFxvUND7hmY/btbAjqIIzl8J for more in-depth explanation

之所以这是因为

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

"a grouping intersects the crossfilter's current filters, except for the associated dimension's filter. Thus, group methods consider only records that satisfy every filter except this dimension's filter. So, if the crossfilter of payments is filtered by type and total, then group by total only observes the filter by type."

这篇关于如何使用DC，D3和Crossfilter过滤数据以生成条形图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！