d3.js - Meteor, where to put d3 code?

Question

I use meteor, iron-router, and d3. d3 is used to reactively display a pie chart based on the data, which I calculate in the data function of iron-router. So, I want to the d3 to run when the dom is in place.

However, I don't know where I should put the d3 code. I used to put it in the data function that I generate the data. However, sometimes the data function is computed while the dom is not ready (so d3 cannot draw the chart).

I would want to run d3 after the dom is completely rendered, and the function can access the result of the data function. I tried to use hooks onAfterAction, but it seems this function cannot access the data. I also tried to use Template..rendered, as some other posts in stackoverflow says. However, the rendered function seems to only run once, and it doesn't re-run when the data changes. I put the rendered function in Tracker.autorun function, but it still only get run once.

So, is there a place to run the d3 code reactively that can access the rendered dom as well as the data field?

Thanks.

Answer 1

You should use the onRendered callback with a template autorun. Out of the box that doesn't work with 1.0, however there's a trick - you can get the autorun to rerun after a context change by using Template.currentData like this:

Template.myPictures.onRendered(function () {
  this.autorun(function () {
    var data = Template.currentData();
    // use data with d3 here
  });
});

For more details, see the end of this issue.