title: Create Path Between Initial Child Nodes - D3 Tree Layout
body: <p>I am using the <a href="http://bl.ocks.org/mbostock/4339083" rel="nofollow noreferrer">D3 Collapsible Tree Layout</a> and would like to create a path that begins at the first child node and travels all the way to the last initial child node, while mainlining it's position when the graph is scaled/updated. Basically this is what I'm going for</p>
  
  <p><a href="https://i.stack.imgur.com/lMQ5u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lMQ5u.png" alt="enter image description here"></a></p>
  
  <p>I've tried this so far:</p>
  
  <pre><code>var nodes = tree.nodes(root).reverse();
  /**
    * transition logic, etc
  **/
  var rootNodes = [ nodes[0], nodes[1] ]; //will use first 2 nodes as an example (will want to include all initial root nodes)
  var lineFunction = d3.svg.line('step')
      .x(function(d) { return d.y; })
      .y(function(d) { return d.x; })
      .interpolate("linear");
  var lineGraph = vis.append("path")
      .attr("d", lineFunction(nodes))
      .attr("stroke", "#ccc")
      .attr("stroke-width", "1.5")
      .attr("fill", "none");
  
      }
  </code></pre>
  
  <p>However I'm not sure how to get it to transition within the update() function properly, also it creates extra paths under the root nodes and ends up looking like this: </p>
  
  <p><a href="https://i.stack.imgur.com/Scvli.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Scvli.png" alt="enter image description here"></a></p>
  
  <p>Any ideas?</p>
  
  <p><strong>UPDATE:</strong> If I grab the <code>root</code> of my data array, I can keep my new paths within the first child nodes of my tree</p>
  
  <pre><code>root = json;//JSON Object returned from my program
  //...
  var rootNodes = [ root.children[0], root.children[1] ];
  </code></pre>