Unable to reset the focus ordinal bar chart

问题

I am trying to reset after choosing some of the individual's bar.

index.html: (line no. 62)

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

This seems not to work. I was able to reset all the graphs pie chart, line chart, etc but not this one.

Those two ordinal graphs are created in index.js like this:

var focus = new dc.barChart('#focus');
var range = new dc.barChart('#range');

https://blockbuilder.org/ninjakx/483fd69328694c6b6125bb43b9f7f8a7

Update: It looks weird now Coz it's showing a single bar and all the bar have got invisible but I want them to be visible (in gray colour) but not clickable.

回答1:

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.

来源：https://stackoverflow.com/questions/61183084/unable-to-reset-the-focus-ordinal-bar-chart

标签

d3.js

dc.js