title: D3 force layout that moves branches in tree instead of nodes
body: <p>I have a tree and additional links between the leafs. I want to apply force layout for those nodes, so that the branches are forced to move closer together. Not the separate nodes (the tree layout should be preserved). </p>
  
  <p>So for image below I want branches that start in 7 and and 4 to change places, so that nodes 5 and 0 become closer. So far I acheaved moving only separate nodes together. See another image below. </p>
  
  <p>Here is <a href="http://jsfiddle.net/1ahutwvp/35/" rel="nofollow noreferrer">jsfiddle link</a> Could you please suggest the best way to change the places of branches using force layout?</p>
  
  <p><a href="https://i.stack.imgur.com/NS2Qz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NS2Qz.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/wCLxj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wCLxj.png" alt="enter image description here"></a></p>
  
  <p>I applied force layout only on some nodes:</p>
  
  <pre><code>// assign special type on creation/////////////////////////////////////
  var ind1 = 0;
  var ind2 = 5;
  nodes.forEach(function(d, i) {
    if (i ==  ind1 || i == ind2) {
      d.dataType = 'special';
    } else {
      d.dataType = 'none';
    }
  }
  )
  // draw path between special nodes/////////////////////////////////////
  var nodeS = nodes[ind1];
      var nodeT = nodes[ind2];
      var newLink = {source: nodeS, target: nodeT};
      specialLinks.push(newLink);
      nodesSelected.push(nodeS);
      nodesSelected.push(nodeT);
  
      linkSel = svg.selectAll('path.linkExtra').data(specialLinks);
      nodeSel = svg.selectAll('g.node').filter(function(d,i){
        return d3.select(this).attr('data-type') == 'special';
      })
  
      linkSel.enter().append('path')
          .attr('class', 'linkExtra')
          .attr('d', d3.svg.diagonal().projection(function(d) {
            return [d.y, d.x];
          }));
  
  // create force layout/////////////////////////////////////
  var force = d3.layout.force()
    .gravity(0)
    .charge(20)
    .linkDistance(100)
    .linkStrength(1)
    .size([500, 500]);
  
  
  
   // main function to apply forces/////////////////////////////////////
       function inittForce() { 
      force
          .nodes(nodesSelected)
          .links(specialLinks)
           .start();
  
  
      force.on('tick', function(e) {
  
        linkSel.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; });
  
        nodeSel.attr('cx', function(d, i) {return  d.x;})
            .attr('cy', function(d) { return d.y; });
  
        svg.selectAll('*').remove();
        drawTree();
        drawPath();
      });
    }
  </code></pre>