DC.js - deselect feature or filter all but the ones that are clicked

Question

I'm not sure if this is possible and no luck on researching this. I'm working on a dashboard using DC.js charts and crossfilter.js. I'm going to use a Row chart as an example. Instead of clicking on the items to filter, is it possible to do that opposite?

For example. When I click on an item from a row chart, instead of filtering on that selected item, it will deselect that item and filter the rest of the other items. And then I will keep clicking on other items to deselect.

Pretty much my goal is to implement a feature where a user can hold the 'CTRL key' and 'left click' the items in the Row Chart to deselect. This way a user dont need to click more than 50+ items in the row chart to filter and have few items not to filter.

I do have a code where Javascript detect an event where "CTRL" and "Left click" triggers. but not sure of how to filter all except the ones that are clicked.

I hope this makes sense. I tried to look at the DC.js or Crossfilter api and I cannot find a function that can do that or am i missing something.

Answer 1

It sounds like you want the same behavior except for the very first click, where you want to keep everything else and remove the clicked item if ctrl is pressed.

If there is anything selected, then a click should toggle as usual, whether or not ctrl is pressed.

As Ethan suggests, you could probably implement this as a filterHandler. That should work too, but since it's mostly the same behavior, I'd suggest using an override of onClick.

Unfortunately the technique for overriding this method is not pretty, but it works!

  var oldClick = rowChart.onClick;
  rowChart.onClick = function(d) {
      var chart = this;
      if(!d3.event.altKey)
          return oldClick.call(chart, d); // normal behavior if no mod key
      var current = chart.filters();
      if(current.length)
          return oldClick.call(chart, d); // normal behavior if there is already a selection
      current = chart.group().all()
          .map(kv => kv.key)
          .filter(k => k != d.key);
      chart.replaceFilter([current]).redrawGroup();
  };

I used the alt key instead of ctrl because ctrl-click on Macs is a synonym for right-click.

Answer 2

I'm using this on the rowcharts where I need this feature.
It's a little bit shorter than the other answer, maybe it can be useful to someone (I don't know which is better).

    // select only one category at a time
    mychart.onClick = function(_chart){ return function (d) {
        var filter = _chart.keyAccessor()(d);
        dc.events.trigger(function () {
            _chart.filter(null);
            _chart.filter(filter);
            _chart.redrawGroup();
        });
    }; }(mychart)

Where mychart is the name of your dc.rowchart

    var mychart = dc.rowChart('#mychart');

[EDIT]

This one works too, is shorter, and works with barcharts

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