Is there a way to attach callback what fires whenever a crossfilter dimension filter changes?

5
votes

I have several charts built with dc.js. I can achieve the desired functionality by attaching a callback to each dc.js chart's .on("filterted", function(chart) {}) but this is annoying because I have to attach the same callback to each chart. And error prone because as new charts are added, someone has to remember to attach an event hander. I would prefer to just attach a callback to the underlying crossfilter. Is that possible?

Is there a way to optimize this...

var ndx = crossfilter(data);
var dimAlpha = ndx.dimension(function(d) {return d.alpha});
var dimBeta = ndx.dimension(function(d) {return d.beta});
var groupAlpha = dimAlpha.group().reduceSum(function(d) {return 1;});
var groupBeta = dimBeta.group().reduceSum(function(d) {return 1;});

dc.pieChart(myDomId1)
  .dimension(dimAlpha)
  .group(groupAlpha)
  .on("filtered", function(chart) {
    //do stuff
  });

dc.pieChart(myDomId2)
  .dimension(dimBeta)
  .group(groupBeta)
  .on("filtered", function(chart) {
    //do stuff
  });

into something like this...

var ndx = crossfilter(data);
var dimAlpha = ndx.dimension(function(d) {return d.alpha});
var dimBeta = ndx.dimension(function(d) {return d.beta});
var groupAlpha = dimAlpha.group().reduceSum(function(d) {return 1;});
var groupBeta = dimBeta.group().reduceSum(function(d) {return 1;});

dc.pieChart(myDomId1)
  .dimension(dimAlpha)
  .group(groupAlpha);

dc.pieChart(myDomId2)
  .dimension(dimBeta)
  .group(groupBeta);

ndx.on("filtered", function() {
  //do stuff
})
3
crossfilterdc.js

3 Answers

4
votes

If you've got a million charts and don't want to have to attach the event listener to each one manually, you could iterate through the chart registry and add them that way. Ex:

dc.chartRegistry.list().forEach(function(chart) {
    chart.on('filtered', function() {
        // your event listener code goes here.
    });
});

Note that this code must go after the charts have instantiated to work.

3
votes

In the absence of a way to attach the callback once globally, one thing you could do to mitigate the risk from duplicate code is to define the callback function once and pass in a reference instead of defining it inline on each chart.

function my_func() {
    // do stuff
}

dc.pieChart(myDomId2)
    .dimension(dimBeta)
    .group(groupBeta)
    .on("filtered", my_func);
0
votes

chart and filter can also be passed to the filter function something like:

function my_func(chart,filter) {
// do stuff
}

 dc.pieChart(myDomId2)
.dimension(dimBeta)
.group(groupBeta)
.on("filtered", my_func);