title: D3 force layout: links and nodes --- z-index(?)
body: <p>D3: problems between nodes and links</p>
  
  <p>I created the following <a href="http://jsfiddle.net/KangMin/MUSKE/4/" rel="noreferrer">jsfiddle</a> to get an idea of what i'm trying to achieve:</p>
  
  <p><img src="https://i.stack.imgur.com/FtxVS.png" alt="enter image description here"></p>
  
  <p>I want nodes to over(?) links...</p>
  
  <p>Please help me. I'm sorry for my English :) </p>
  
  <p>Script looks like this:</p>
  
  <pre><code>function myGraph(el) {
  this.addNode = function (id) {
      nodes.push({ "id": id });
      update();
  }
  this.removeNode = function (id) {
      var i = 0;
      var n = findNode(id);
      while (i &lt; links.length) {
          if ((links[i]['source'] == n) || (links[i]['target'] == n)) links.splice(i, 1);
          else i++;
      }
      nodes.splice(findNodeIndex(id), 1);
      update();
  }
  this.addLink = function (source, target) {
      links.push({ "source": findNode(source), "target": findNode(target) });
      update();
  }
  var findNode = function (id) {
      for (var i in nodes) { if (nodes[i]["id"] === id) return nodes[i] };
  }
  var findNodeIndex = function (id) {
      for (var i in nodes) { if (nodes[i]["id"] === id) return i };
  }
  // set up the D3 svg in the specified element
  var w = window.jQuery(el).innerWidth(),
      h = window.jQuery(el).innerHeight();
  var svg = this.svg = d3.select(el).append("svg:svg")
      .attr("width", w)
      .attr("height", h);
  var force = d3.layout.force()
      .gravity(.05)
      .distance(100)
      .charge(-120)
      .size([w, h]);
  var nodes = force.nodes(),
      links = force.links();
  var update = function () {
      var link = svg.selectAll(".link")
          .data(links, function (d) { return d.source.id + "-" + d.target.id; })
      link.enter().append("line")
          .attr("class", "link")
      link.exit().remove();
      var node = svg.selectAll(".node")
          .data(nodes, function (d) { return d.id; })
      node.enter().append("g")
          .attr("class", "node")
          .call(force.drag);
      node.append("circle")
          .attr("r", function (d) { return 30; })
          .style("fill", "#EFEFEF")
      node.append("text")
          .attr("text-anchor", "right")
          .text(function (d) { return d.id; });
      force.on("tick", function () {
          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; });
          node.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });
      });
      // Restart the force layout.
      force.start();
  }
  // Make it all go
  update();
  }
  graph = new myGraph("#graph");
  // You can do this from the console as much as you like...
  graph.addNode("Cause");
  graph.addNode("Effect");
  graph.addLink("Cause", "Effect");
  graph.addNode("A");
  graph.addNode("B");
  graph.addLink("A", "B");
  </code></pre>