Remove empty groups from dc.js graph

Question

I have gone through all the SO questions on removing empty bins from a dc.js graph but couldn't find anything besides the fake group approach

filter_group = function(oldGroup) {
    return {
        all: oldGroup.all().filter(...)
    };
}
newGroup = filter_group(oldGroup);

and then use newGroup in the dc.js graphs.

What this does for me is create the right set of bins on first draw but it doesn't re-filter when I apply filters to other dimensions. So I end up with the correct intial bins but in subsequent redraws I still end up with empty bins.

What I would like to achieve is proper re-filter and redraw i.e getting rid of the bins according to my filter function and redraw excluding the filtered bins so having a varying number of bins.

Here is a fiddle that shows what I mean. I have set up the data so that filtering on a in the first graph should remove the g bar in the second (and filtering on g in the second should remove the a one in the first graph) But it doesn't remove the empty bar from the axis, it just shows the label with no bar.

Starting point :

After filtering on g in second graph (I would like a to not even show on the axis) :

PS : I have tagged reductio and d3.js in case there is an elegant solution using those packages even though I'd rather keep it within dc.js.

I just removed the Javascript tag because these questions tend to get downvotes when they have that tag :( It would be really helpful if you could share an example of what you're actually trying to do, what dc.js chart you are using, etc. Generally I would say a fake group is the best thing to do if you just want to filter out empty groups. But it seems like that's not working for you and we would need to see more context to help you fix it. That said, the fact that your fake group is using .map and not .filter may be contributing to your problem. — Ethan Jewett
This is just pseudo code. I actually use filter in my actual code. Will try and come up with a fiddle — Chapo
Thanks - and in the future, please try to include a real working example in your question, not pseudo-code. This introduction of unintentional issues (or even removing the actual issue) tends to happen a lot when converting questions to pseudo-code :D — Ethan Jewett
Sorry, this fiddle doesn't run (group is not defined) and doesn't seem to have remove_empty_bins in it. — Gordon

Gordon Gordon · Accepted Answer · 2018-04-26T21:56:08

The X scale's domain determines which bars are shown.

You are manually setting the domains on your charts:

.x(d3.scale.ordinal().domain(filter_group(group).all().map(function(d) {return(d.key);}).unshift("")))

I'm sure you were solving some other problem with that, but if you remove that, and specify

.elasticX(true)

instead, then you don't need the on("filtered",... and the charts will remove bins when their values are zero.

Fork of your fiddle.

Remove empty groups from dc.js graph

1 Answers