[Solved]-Grouping Circles and Path as a node in D3 Force Layout?-d3.js

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) {
      return d.target.x;
    })
    .attr("y2", function(d) {
      return d.target.y;
    });
  //transform for nodes.
  node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")"
  })

}

Working code here

Hope this helps!