score:1

Accepted answer

This example replaces the built-in filtering functionality of the bar chart with its own implementation of ordinal selection, because the chart has a linear scale.

The example uses a global variable focusFilter to store the current selection. We need to empty this out and we also need to update the dimension filter as the original filterAll would do, pulling that code out of the click handler:

    focus.applyFilter = function() { // non-standard method
        if(focusFilter.length)
            this.dimension().filterFunction(function(k) {
                return focusFilter.includes(k);
            });
        else this.dimension().filter(null);
    };
    focus.filterAll = function() {
        focusFilter = [];
        this.applyFilter();
    };

This will also allow dc.filterAll() to work, for a "reset all" link.

Fork of your block.

For some reason, I could not get the original

<a href="javascript:focus.filterAll(); dc.redrawAll()">reset</a>

links to work at all in this block, so I replaced them with the equivalent D3 click handlers:

    d3.select('#reset-focus').on('click', () => {
      focus.filterAll();
      dc.redrawAll();
    })
    d3.select('#reset-all').on('click', () => {
      dc.filterAll();
      dc.redrawAll();
    })

I also updated the focus ordinal bar example. Note that automatic hiding/showing of the reset link doesn't work because the chart still has an irrelevant range filter inside of it.


Related Query