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组中所有条目的数据表（网格）。团队过滤器应该能够应用于这两个图表。

我对如何处理分组/过滤来实现这一点感到很困惑。这就是我现在所拥有的，但它会自动将所有内容过滤到第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的数据表小部件，因为它会自动更新，而无需您管理它。

使用dc.js和crossfilter的不同图表的不同过滤器

1 个答案: