CODEWITHSUNDEEP
d3.jsdc.js
Stuart
Stuart

Reputation: 55

How do you use the dc.redrawAll() function onclick?

I would like to be able to use the dc.js select menu (dc.selectMenu) in such a way that when I click on an element it gets the value of said element and that becomes the value of the select, once selected it should refresh the data as it normally would if you had just selected in the first place.

The problem I'm having is that I can set the value, but dc.redrawAll() seems to do nothing for me so I think I must be filtering wrongly, but I can't find much information online regarding how to do it other than simply using the filter method (not onclick).

I have tried to set the destination to whatever data-destination is which appears to be working, the value of the select does update when I check with console.log to check the value of the select menu, I then use the dc.redrawAll() function expecting it would filter based on the select option but it does nothing (not even an error in the console)

My function so far is looking like:

function select_destination(ndx) {
    var destination_dim = ndx.dimension(dc.pluck('destination'));
    var destination_group = destination_dim.group();
    var destination = null;

    document.addEventListener('click', function(e) {
        if (!e.target.matches('.open-popup-link')) return;

        e.preventDefault();

        var destination = e.target.getAttribute('data-destination').toString();
        document.getElementById('select-destination').value = destination;

        dc.redrawAll();
    });

    dc.selectMenu('#select-destination')
        .dimension(destination_dim)
        .group(destination_group)
        .filter(destination);
}

I would expect the graphs to update based on the select option but nothing happens, and I get no error message to go off either.

I suspect I'm using dc.redrawAll() wrongly as if I go to the console and type dc.redrawAll(); I get undefined but I'm really at a loss now and the documentation isn't really helping me at this point so I don't know what else to do.

Upvotes: 1

Views: 211

Answers (1)

Xavier
Xavier

Reputation: 1207

they are bits of your code that I don't quite understand, for instance why do you have have filter(destination /*=null */)

anyway, So you want to filter the select menu? you can call directly the replaceFilter function with the value, as done in the source code:

    menu.replaceFilter(destination);
    dc.events.trigger(function () {
        menu.redrawGroup();
    });

See the source code for the full example of how it's done https://dc-js.github.io/dc.js/docs/html/select-menu.js.html#sunlight-1-line-129

as for why it doesn't work, I have had some surprising results mixing d3 with pure dom js. Try to rewrite your even handler in d3, eg

d3.select('#select-destination').property('value', destination);

it's possibly that changing the value on the dom directly isn't triggering the change event.

My experience with d3 is that it works better to change the underlying data (call directly filter functions or whatever you want to do) and let dc redraw the needed rather than manipulating the dom directly

Upvotes: 2

Related Questions