Accepted answer

Here is how you can fix your layout problem.

Instead of setting cx and cy to circle in the tick.

Do following:

  1. Make a group
  2. Add circle to above group (do not set cx/cy)
  3. Add path to the above group. (do not set transform)

In tick do following to transform both circle and path which is contained in it.

function tick() {
  link.attr("x1", function(d) {
      return d.source.x;
    .attr("y1", function(d) {
      return d.source.y;
    .attr("x2", function(d) {
    .attr("y2", function(d) {
  //transform for nodes.
  node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")"


Working code here

Hope this helps!

Related Query

More Query from same tag