使用 dc.js 和交叉过滤器对不同图表使用不同过滤器

Question

我有以下格式的数据：

[
  {"ID": 1,  "title": Temporary Title, "team": TeamA, "group": 1},
  {"ID": 2,  "title": One Dinosaur, "team": TeamA, "group": 2},
  {"ID": 3,  "title": Another Book, "team": TeamB, "group": 1},
  {"ID": 4,  "title": Try Again, "team": TeamC, "group": 1},
  {"ID": 5,  "title": Last One, "team": TeamC, "group": 2}
]

我想要一个显示第 1 组项目按团队分布的饼图，以及一个显示第 2 组所有条目的数据表（网格）。团队过滤器应该能够应用于这两个图表。

我很困惑如何处理 grouping/filtering 来实现这一点。这是我现在拥有的，但它会自动将所有内容过滤到第 2 组。

var byTeamForPie = data.dimension(function (s) {
    return s.team;
});

var group1Counts = byTeamForPie.group().reduceCount(function (d) {
    if (d.group == 1) {
        return 1;
    }
    return 0;
});

var pieChart = dc.pieChart("#teamPieChart");
pieChart
.width(500)
.height(580)
.innerRadius(10)
.dimension(byTeam)
.group(group1Counts);

var byGroup = data.dimension(function (s) {
    return s.group;
});
byGroup.filter(2);

datatable = $('#chart').DataTable({
    "info": true,
    "responsive": true,
    "pagingType": "full_numbers",
    "lengthChange": true,
    "pageLength": 15,
    "lengthMenu": [10, 25, 50],
    "bLengthChange": false,
    "bFilter": false,
    "bSort": true,
    "bInfo": false,
    "bAutoWidth": false,
    "bDeferRender": true,
    "aaData": byGroup.top(Infinity),
    "bDestroy": true,
    "aoColumns": [
        { "mData": "ID", "sDefaultContent": "" },
        { "mData": "title", "sDefaultContent": " " },
        { "mData": "team", "sDefaultContent": " " },
        { "mData": "group", "sDefaultContent": " " }
    ]
});


var byTeam = data.dimension(function (s) { return s.team; });
var teams = byTeam.group();
var filtered_teams = remove_empty_bins(teams);
var teamsChart = dc.rowChart("#teamChart");
teamsChart.width(300).height(300).dimension(byTeam).group(filtered_teams).label(function (d) {
    return d.key;
})
.labelOffsetX(-50)
.ordering(function (d) {
    return -d.value;
})
.title(function (d) {
    return d.value;
})
.elasticX(true).x(d3.scale.ordinal())
.margins({ top: 10, bottom: 30, left: 55, right: 10 });

注意：我没有在此处包含数据表的 refreshtable() 函数

Answer 1

不确定这是否理想，但我会说删除 byGroup.filter(2); 并更改

"aaData": byGroup.top(Infinity)

至

"aaData": byGroup.top(Infinity).filter(function(d) { return d.group === 2; })

在 Crossfilter 中，应用于维度的过滤器会应用于所有其他维度和组。所以当你执行 byGroup.filter(2) 时，你的 group1Counts 将全部变为 0。

您可能需要考虑改用 dc.js 的数据 table 小部件，因为它会自动更新而无需您管理。

使用 dc.js 和交叉过滤器对不同图表使用不同过滤器

Different filters for different charts using dc.js and crossfilter

d3.js

crossfilter

dc.js