score:1

Accepted answer

The main thing you're missing is that for g elements, setting cx/cy doesn't do anything. That is, the code

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

in your tick() function works fine for circles (which have cx/cy), but not for g elements. What you need to set there is transform:

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

Apart from that, you just need to adjust the positions of the icons like in the example you've linked to so that they appear centred. Complete example here.


Related Query

More Query from same tag