Meteor, where to put the code d3?
I am using meteorite, iron router and d3. d3 is used to interactively display a pie chart based on data that I compute in the data function of the iron router. So, I want 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 this in a data function that I am generating data. However, sometimes the data function is evaluated until dom is ready (so d3 cannot draw the diagram).
I would like to run d3 after the dom is fully displayed and the function can access the result of the data function. I tried using hooks onAfterAction but it seems that this function cannot access the data. I also tried using Template..rendered as some other posts on stackoverflow say. However, the displayed function only works once and it does not restart when data changes. I put the rendered function in the Tracker.autorun function, but it still only runs once.
So, is there any place to quickly run d3 code that can access the displayed dom as well as the data field?
Thank.
source to share
You have to use the onRendered callback with the autostart pattern . Out of the box that doesn't work with 1.0
, however there is a trick - you can restart autostart after changing the context using Template. currentData as follows:
Template.myPictures.onRendered(function () {
this.autorun(function () {
var data = Template.currentData();
// use data with d3 here
});
});
See the end of this issue for details .
source to share