Has anyone tried creating a D3 pie component within each node of a tree?
I've managed to build the tree and a single pie separately, but I'm struggling to combine them.
My JSON data looks like this:
window.json = {
"health": [{
"value": 60
}, {
"value": 10
}, {
"value": 30
}],
"color": orange,
"children": [{
"health": [{
"value": 60
}, {
"value": 20
}, {
"value": 20
}],
"color": green
}, {
"health": [{
"value": 40
}, {
"value": 30
}, {
"value": 30
}],
"color": orange
}]
};
This represents the tree structure, with each node containing data for a pie chart based on the "health" properties.
The tree can be viewed here: http://jsfiddle.net/4srt30pj/4/
A standalone pie chart example is available here: http://jsfiddle.net/4srt30pj/5/
However, I'm unable to integrate these components so that each node displays a pie chart. I attempted creating a function for drawing the pie component:
function drawPie(selection, node) {
selection.data(node, function(d, i) {
console.log(node);
console.log(d);
console.log(i);
return pie(d.health);
})
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function (d, i) {
return color(i);
});
}
Then calling it for each tree node:
drawPie(vis.selectAll("g.node"), nodes);
(Full code can be found here: http://jsfiddle.net/4srt30pj/6/)
Unfortunately, the pies are not displaying as expected.
Is there a way to successfully achieve this composition?