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

问题

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 answer the question "What is it supposed to filter?" - Only show records with value > 0. For example when Row 'a' is clicked it will only show records with value for a > 0. Hence, the Type pie chart will change to foo:1, bar:2

I guess I have to overwrite onClick method? But I am not sure how.

chart.onClick = function(d) {}

jsfiddle from the answer to the above question - http://jsfiddle.net/gordonwoodhull/37uET/6/

Any suggestions?

Thanks!

回答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: http://jsfiddle.net/gordonwoodhull/37uET/18/

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];)

来源：https://stackoverflow.com/questions/34299017/dc-js-creating-a-row-chart-from-multiple-columns-and-enabling-filtering

标签

dc.js

crossfilter