title: D3 Tree Graph - How to transition links when using straight line, not diagonal
body: <p>I am working with this JS Fiddle: <a href="http://jsfiddle.net/f1nzagyw/" rel="nofollow">http://jsfiddle.net/f1nzagyw/</a></p>
  
  <p>I want to change the example from diagonal to straight lines, which I have been able to do but when I click on a node to expand or shorten the graph, the old links aren't being removed from the graph, so I end up with multiple links. Can someone please advise on how I can transition the original links, using straight lines, with the transitioning nodes? It seemed to change when I moved from diagonal to straight lines.</p>
  
  <p>I added the lineFunction and used it in the links as you can see in the fiddle,:</p>
  
  <pre><code>     var lineFunction = d3.svg.line()
          .x(function(d) { return d.x; })
          .y(function(d) { return d.y; })
          .interpolate("linear");
  </code></pre>
  
  <p>I also appended the "line" and the x/y coordinates:</p>
  
  <pre><code> var link = svg.selectAll("path.link")
        .data(links)
        .enter().append("line")
        .attr("class", "link")
        .attr("x1", function(d) { return d.source.y; })
        .attr("y1", function(d) { return d.source.x; })
        .attr("x2", function(d) { return d.target.y; })
        .attr("y2", function(d) { return d.target.x; });
  </code></pre>
  
  <p>Also, what's the best way to keep the links behind the nodes, so that the links run behind the nodes, not in front? I thought I just needed to put the code for the links above the nodes but that doesn't seem to be working.</p>
  
  <p>Any help is appreciated. 
  Thanks</p>