Link positions are off, If a node is dynamically added. about d3-force

[mbostock]

In update your code is setting node to just the entering nodes (node = node.enter().append("g")) and link to just the entering links (link = link.enter().append("line")), so subsequent redrawing of the graph only redraws the nodes and links that were entered in the last update.

You can fix this by merging enter and update after doing the data join. For example:

link = svg.selectAll(".link").data(links, function(d) { return d.target.id; })
var linkEnter = link.enter().append("line").attr("class", "link");
link = linkEnter.merge(link);

A fixed example:

http://bl.ocks.org/mbostock/a270e536f0f4e44c0bc765bf951893eb

I noticed another bug in your code which is that you initialize the new link’s source and target using the numeric id rather than references to the node objects. That’s fine, but the problem is you refer to d.target.id as the key in your data join before you’ve called link.links, and thus before the link has replaced your numeric id with a reference to the node object. It’s cleaner to initialize the link with the source and target references directly; link.id is really intended for when you want to serialize your graph to JSON (which doesn’t support object references).

function click(d) {
  var target = {id: index, name: "server " + index};
  nodes.push(target);
  links.push({source: d, target: target});
  index++;
  update();
}

[Kirupakaran]

If you expand and collapse the root node, it seems as if the children of root form a separate force layout and the root nodes is not draggable.

[Kirupakaran]

Another fiddle with simple force layout.

https://jsfiddle.net/n4m1r8nb/1/

Adding nodes dynamically on click. Same issue occurs.

[Kirupakaran]

@mbostock , Thank you very much. :) And, Good luck for v4!