D3 js line overlaps node

Question

I am doing force layout, on event click i add new node and connect by line. But line overlaps node. Why? My code is shown http://jsfiddle.net/WRGtL/

function click(d) {
  if (d3.event.defaultPrevented) return; // ignore drag
  //alert("clicked");
  var d = {id:"d"};
  nodes.push(nodeId[index]);
  if(index==0)
  links.push({source: a, target: nodeId[index]});
      else
      links.push({source: nodes[1], target: nodeId[index]});
  index++;
  start();
}

Answer 1

In SVG, the Z order of elements is the order they appear in the file. The easiest way of having all lines appear below the circles is to group all lines and all circles in their own groups and let these groups define the Z order.

I've simply added two groups linksG and nodesG that the elements will be created in:

var linkG = svg.append("g"),
    nodeG = svg.append("g");

var node = nodeG.selectAll(".node"),
    link = linkG.selectAll(".link");

see the JSFiddle for a demo.

Edit: forgot to save the fiddle. Link fixed.