Rowchart select only a single bar in dc.js / crossfilter?

Question

I have a dc.rowchart that has 5 different "categories". Initially, all are selected. When I click on one, then only that one is highlighted. When I click on a second one... both the first and second one I clicked are highlighted.

How can I make it/configure the rowchart such that only a single category is highlighted every time a bar is clicked?

dc.filter("category1");
dc.filter("category2");

Both of these in sequence appear to "append" filters than replace.

Answer 1

Ethan's answer is almost there. It's likely unintentional, but dc.js doesn't appear to use the return value for addFilterHandler, so you'll have to modify the filters parameter for it to work, like so:

myChart.addFilterHandler(function (filters, filter) {
    filters.length = 0; // empty the array
    filters.push(filter);
    return filters;
});

This works great as long as your chart doesn't use cap (e.g. a pie chart with limited slices), as this handler prevents the others group from working. I've yet to come up with a satisfactory solution for that case, unfortunately.

Answer 2

I assume you'll want addFilterHandler - https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#dc.baseMixin+addFilterHandler

You'd probably want to do the following, but it's untested.

myChart.addFilterHander(function (filters, filter) {
    return [filter];
});