meteor add d3 grafics dynamically fails - d3.js

Question

I'm drawing a d3 donut. Now I want to add as many donuts as entries in database. If I add something to database, automatic updating fails. I have to reload My code in the Browser - then I see the new donut. Isnt Meteor.autorun updating automatically?
Code is:
Template.donuts.rendered = function (){
var self = this;
self.node = self.find("p");
// Data
var dataset = {
apples: [2, 2, 2, 2, 2]
};
//Width and height
var width = 100,
height = 100,
radius = Math.min(width, height) / 2;
// render
self.handle = Meteor.autorun(function () {
var color = d3.scale.category10();
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc()
.innerRadius(radius - 20)
.outerRadius(radius - 5);
var svg = d3.select(self.node).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var path = svg.selectAll("path")
.data(pie(dataset.apples))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
});
}; //Template.donuts
it is called via handlebars
<template name="donuts">
{{#each nodes}}
<p></p>
{{/each}}
</template>
What am I doing wrong. Thank you for your time.

Answer 1

Your rendered hook is on the wrong level. Right now you're connecting it to the template that contains the donuts, when it looks like you want to have each donut be rendered in a certain way. First, start by reorganising your templates:
<template name="donuts">
{{#each nodes}}
{{> node}}
{{/each}}
</template>
<template name="node"><p></p></template>
Now you can tell a node what to do when it's rendered:
Template.node.rendered = function() {
// d3 code
}
The rendered call will be automatically run whenever the node is re-rendered, which will happen if you change a dependency. If nodes is a reactive source like a mongodb cursor, this will work immediately. Otherwise, please add more code so we can figure out what else is going on.

Answer 2

Meteor.autorun() will run whenever its dependencies change. You need a reactive datasource inside the function.

Answer 3

Found a more elegant solution:
// Donuts //
function donutinit() {
var dataset = {
apples: [2, 2, 2, 2, 2]
};
//Width and height
var width = 100,
height = 100,
radius = Math.min(width, height) / 2;
// render
var color = d3.scale.category10();
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc()
.innerRadius(radius - 20)
.outerRadius(radius - 5);
var svg = d3.select("#donut_canvas").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var path = svg.selectAll("path")
.data(pie(dataset.apples))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
};
Template.donut.rendered = function() {
donutinit();
};
After that iterate with handlebars over #donut_canvas. The Meteor.autorun or Meteor.rendered gave me unpredictable amounts of donuts - it rendered additional donuts. I had to reload it then.
Answer is inspired from here: Google map contained in meteor Template is rendered twice
Thank you for your time.