dc.js - Creating a row chart from multiple columns and enabling filtering

Question

This is similar to dc.js - how to create a row chart from multiple columns but I want to take it a step further and enable filtering when the rows are clicked.

To an

Answer 1

Okay, here's a solution where if a record has values > 0 for any of the selected rows, that record is included. As @Ethan said, it's a matter of defining a filter handler:

sidewaysRow.filterHandler(function(dim, filters) {
    if(filters && filters.length)
        dim.filterFunction(function(r) {
            return filters.some(function(c) {
                return r[c] > 0;
            });
        })
    else dim.filterAll();
    return filters;
});

Also, since the filterFunction only has access to the key, we pass the entire record through as the key. This doesn't make a whole lot of sense in the "real world" but since we're already using crossfilter sideways, it is probably fine:

var dim = ndx.dimension(function(r) { return r; });

New version of the fiddle: https://jsfiddle.net/gordonwoodhull/b7cak6xj/

BTW it sounds like you want to only select one row at a time. Here's how to do that:

sidewaysRow.addFilterHandler(function(filters, filter) {
  filters.length = 0;
  filters[0] = filter;
  return filters;
})

(This will be simpler in dc 2.1 on the develop branch, where the charts use the result of the filter handlers instead of requiring you to modify the filters in place; the body becomes just return [filter];)