Accepted answer

You're doing too much translation to your nodes. If you want to animate things change:

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

And modify the circle code to this:

var circle = svg.selectAll('.node');

This will translate both the circle (and label) in an animation, while keeping them aligned. Essentially you're double translating your circles at the moment away from the labels. Making this will leave your circle at the default 0,0 but the parent will already have been translated. Here's a diagram to illustrate:

enter image description here

Related Query

More Query from same tag