CODEWITHSUNDEEP
d3.jsdc.js
emma
emma

Reputation: 343

DC.js | How can I trigger my D3 updates?

I'm using some D3 code to tidy up my DC boxplots, e.g. making the circle.outlier radius smaller, inserting a rectangle behind each boxplot and attaching a title for hover.

This works fine on page load. I want it to work on filtering, as well. It works for one kind of filtering and not another.

I have a histogram on the same dashboard, and with .brushOn(true), I have an event, which correctly updates the boxplots on filter: 

.on("filtered", function(obj){ update(); });

This code calls the function below, which calls two more functions: (1) updateFactorFields2, which updates the data behind the boxplots via a fakegroup, and seems to work. and (2) tidyBoxPlots, which is the problem.

function update() {

  var grps = window.grps;//an array holding my crossfilter groups
  var dims = window.dims; //an array holding CF dimensions

  updateFactorFields2(grps[0]);

  factorBox.render();//factorBox is my DC boxplot chart

  tidyBoxPlots('postRender');

}

tidyBoxPlots also updates the .title, but the code below is sufficient. tidyBoxPlots works when ultimately triggered by histChart.on("filtered",...). 

function tidyBoxPlots(evType) {

  d3.selectAll("circle.outlier").attr("r","2");//works in one case and not another
  d3.selectAll("g.box").insert("rect","line.center").attr("x","0").attr("y","0").attr("width","8").attr("height","102.5").attr("class","boxHover");//ditto
}

But tidyBoxPlots doesn't work when triggered by the below, even though update() is called and the updateFactorFields works:

$("[id='filterDropdown']").on('change',function(e,p){
        if (p.selected) {
          var tempIndex = filters[0].indexOf(e.target.id);
          filters[6][tempIndex].push(p.selected);//store this filter
          filters[5][tempIndex].filterFunction(function(d){ return filters[6][tempIndex].indexOf(d)!=-1; });//filter the dimension stored in filters[5] by the array values stored in filters[6]
          update();//calls update() fine

        }

I'm pretty sure the problem is the event type I'm using, as I had trouble with this before. So I've tried most if not all of these but no joy:

http://dc-js.github.io/dc.js/docs/html/dc.baseMixin.html#on

I'm using chosen.js for my dropdowns, hence the jquery.

Can anyone help?

Thanks

Upvotes: 1

Views: 100

Answers (1)

emma
emma

Reputation: 343

To anyone else with the same problem: the problem was getting the right event type plus calling update() in the right location relative to dc.renderAll();

Upvotes: 1

Related Questions