Различные фильтры для различных диаграмм с использованием dc.js и crossfilter

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-й группе по команде, а DataTable (сетка), которая показывает мне все записи в группе 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() для DataTable здесь

Answer 1

Не уверен, если это идеально, но я бы сказал, удалить byGroup.filter(2); и изменить

"aaData": byGroup.top(Infinity)

в

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

В Crossfilter фильтры, применяемые к размерам, применяются ко всем другим размерам и группам. Поэтому, когда вы делаете byGroup.filter (2), ваша группа1Counts будет идти до 0.

Вместо этого вы можете использовать виджет таблицы данных dc.js, так как это будет автоматически обновляться без необходимости управлять им.