Place pie charts on nodes of force directed layout graph in D3

Question

I would like to place pie charts on the node of a D3 force directed layout graph using D3.js. This is a common visualization in population genetics, see for example http://m

Answer 1

The problem appears to be the last statement in your force-on-tick callback:

node.attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; });

SVG paths have no such x/y attributes. Try translating the path instead:

node.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });