How to draw inside graph nodes? - d3.js

Question

I can use d3 to draw a pie chart or a graph, I can even draw a pie chart within each node of a graph as shown here.
Is it possible to create a reusable function that generate the pie chart and attach its result to the each node? That way the pie chart code could be reused, for instance in a 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 the above code, I tried the following code which 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); });;
}

Answer 1

Your original idea is much closer than the one recommended in the other answer, you just need to understand how selection.call works.
This is not tested but the general principle is 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 to your first attempt, if you stop and think about this line...
.call(drawPie(function(d) { return d.proportions; }));
...it's actually trying to call null because that's what is returned by drawPie. It's equivalent to...
.call(null);

Answer 2

Based on the recommendations, here is the modified code which still require some improvements. An error message report that "row 93 undefined is not an object evaluating d.proportions"
graph = { "nodes":[
{"proportions": [{"group": 1, "value": 1},
{"group": 2, "value": 2},
{"group": 3, "value": 3}]},
{"proportions": [{"group": 1, "value": 2},
{"group": 2, "value": 2},
{"group": 3, "value": 2}]}],
"links":[{"source": 0, "target": 1, "length": 500, "width": 1}]
}
var width = 960,
height = 500,
radius = 25,
color = d3.scale.category10();
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.value; });
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(10);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.charge(-120)
.linkDistance(4 * radius)
.size([width, height]);
force.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter()
.append(function(d) {return createPie(d);}) // .append(createPie) --- shorter version
.attr("class", "node");
// 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); });;
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"});
});
function createPie(d) {
console.log(d);
var pie = d3.select(document.createElement('svg:g'));
pie.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); });
return pie.node();
}

Answer 3

var node = svg.selectAll(".node")
.data(graph.nodes)
.enter()
.append(function(d){return createPie(d);}) // .append(createPie) --- shorter version
.attr("class", "node");
function createPie(data) {
var pie = d3.select(document.createElement('svg:g'));
pie.selectAll('path')
...;
return pie.node();
}
UPDATE:
function createPie(d) {
console.log(d);
var p = d3.select(document.createElement('svg:g'));
p.selectAll('path')
.data(pie(d.proportions))
.enter()
.append("svg:path")
.attr("d", arc)
.attr("fill", function(d, i) { return color(d.data.group); });
return p.node();
}
the previous variable pie needs to be refactored because it overwrites the one in parent scope.
and the data call needs to be fixed as well