d3.js - How to draw inside graph nodes? -

i can use d3 draw pie chart or graph, can draw pie chart within each node of graph shown here.

is possible create reusable function generate pie chart , attach result each node? way pie chart code reused, instance in gallery of charts.

    var node = svg.selectall(".node")     .data(graph.nodes)     .enter().append("g")     .attr("class", "node");      // draw pie chart     node.selectall("path")     .data(function(d, i) {return pie(d.proportions); })     .enter()     .append("svg:path")     .attr("d", arc)     .attr("fill", function(d, i) { return color(d.data.group); });; 

from above code, tried following code doesn't work

    var node = svg.selectall(".node")     .data(graph.nodes)     .enter().append("g")     .attr("class", "node")     .call(drawpie(function(d) { return d.proportions; }));       function drawpie(d) {         this.selectall("path")         .data(function(d, i) {return pie(d.proportions); })         .enter()         .append("svg:path")         .attr("d", arc)         .attr("fill", function(d, i) { return color(d.data.group); });;      } 

your original idea closer 1 recommended in other answer, need understand how selection.call works.

this not tested general principle like...

var node = svg.selectall(".node") .data(graph.nodes) .enter().append("g") .attr("class", "node") .call(drawpie);   function drawpie(selection) {     this.selectall("path")     .data(function(d, i) {return pie(d.proportions); })     .enter()     .append("svg:path")     .attr("d", arc)     .attr("fill", function(d, i) { return color(d.data.group); });;  }   

in reference first attempt, if stop , think line...

.call(drawpie(function(d) { return d.proportions; }));   

...it's trying call null because that's returned drawpie. it's equivalent to...

.call(null);