title: How to render links as elbow connectors in d3 force directed graph
body: <p>I'm very new to D3 and this is what I have done till now <a href="http://jsfiddle.net/gj2y87z8/13/" rel="nofollow noreferrer">here</a>. </p>
  
  <p>The actual code is over here:</p>
  
  <pre><code>var width = 1840,
      height = 1480,
      constant = 100, 
      color = "#BCD8CD"
  
  var nodes = [
      {label: '1st stage', x:   constant, y: 215 , width:70,height:50 , color :color , stage: true },
      {label: '2nd stage', x: constant + 150 , y: 215 ,width:70,height:50 ,color :color, stage: true },
      {label: '3rd stage', x: constant + 279, y: 215 ,width:70,height:50, color :color, stage: false },
      {label: '4th stage', x: constant + 460, y: 215 ,width:70,height:50, color :color, stage: false },
      {label: '5th stage', x: constant + 660, y: 215 ,width:70,height:50 ,color :color, stage: false },
      {label: '6th stage', x: constant + 350, y: 350 ,width:70,height:50, color :color, stage: true }
  ];
  
  var links = [
      { source: 0, target: 1 },
      { source: 1, target: 2},
      { source: 2, target: 3},
      { source: 3, target: 4},
      { source: 1, target: 5}
  ];
  
  var svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height);
  
  var marker = svg.append('marker')
      .attr('id',"triangle")
      .attr('viewBox',"0 0 10 10")
      .attr('refX',"0")
      .attr('refY',"5")
      .attr('markerUnits','strokeWidth')
      .attr('markerWidth','4')
      .attr('markerHeight','3')
      .attr('orient','auto')
  
  var path = marker.append('path')
        .attr('d',"M 0 0 L 10 5 L 0 10 z")
  
  var force = d3.layout.force()
      .size([width, height])
      .nodes(nodes)
      .links(links);
  force.linkDistance(width/4);
  
  var link = svg.selectAll('.link')
      .data(links)
      .enter().append('line')
      .attr("stroke-width", "2")
      .attr('marker-end','url(#triangle)')
      .attr('stroke','black')
  
  var defs = svg.append("defs");
  
  // create filter with id #drop-shadow
  // height=130% so that the shadow is not clipped
  var filter = defs.append("filter")
      .attr("id", "drop-shadow")
      .attr("height", "130%");
  
  // SourceAlpha refers to opacity of graphic that this filter will be applied to
  // convolve that with a Gaussian with standard deviation 3 and store result
  // in blur
  filter.append("feGaussianBlur")
      .attr("in", "SourceAlpha")
      .attr("stdDeviation", 3)
      .attr("result", "blur");
  
  // translate output of Gaussian blur to the right and downwards with 2px
  // store result in offsetBlur
  var feOffset = filter.append("feOffset")
      .attr("in", "blur")
      .attr("dx", 2)
      .attr("dy", 2)
      .attr("result", "offsetBlur");
  
  // overlay original SourceGraphic over translated blurred opacity by using
  // feMerge filter. Order of specifying inputs is important!
  var feMerge = filter.append("feMerge");
  
  feMerge.append("feMergeNode")
      .attr("in", "offsetBlur")
  feMerge.append("feMergeNode")
      .attr("in", "SourceGraphic");
  
  var node = svg.selectAll('.node')
      .data(nodes)
      .enter().append('g')
      .attr('class', 'node')
  .attr("transform", function(d){
      return "translate("+d.x+","+d.y+")";
  })
  
  node.append("rect").attr("class", "nodeRect")
          .attr("rx", 6)
          .attr("ry", 6)
          .attr('width', function(d) { return d.width; })
          .attr('height', function(d) { return d.height; })
          .style("fill", function(d) { return d.color; })
          .transition()
          .duration(1000) // this is 1s
          .delay(1000) 
          .style("fill",function(d){if(d.stage) return "#FF9966"})
          .style("filter",function(d){if(d.stage) return "url(#drop-shadow)"})
  
  
  node.append("text").style("text-anchor", "middle")
          .style("pointer-events", "none")
          .style("font-weight", 900)
          .attr("fill", "white")
          .style("stroke-width", "0.3px")
          .style("font-size", "16px")
          .attr("y", function (d){return d.height/2+6;})
          .attr("x", function (d){return d.width/2;})
          .text(function (d) {return d.label;})
  
  force.start();
  
  link.attr('x1', function(d) { return d.source.x + d.source.width/2; })
      .attr('y1', function(d) { return d.source.y + d.source.height/2; })
      .attr('x2', function(d) { return d.target.x + d.target.width/2; })
      .attr('y2', function(d) { return d.target.y + d.target.height/2; })
      .transition()
      .duration(1000) // this is 1s
      .delay(1000) 
      .style("filter",function(d){if(d.source.stage) return "url(#drop-shadow)"})
  </code></pre>
  
  <p>this works as expected, apart from the links that is getting rendered. For example, this link :</p>
  
  <p><img src="https://i.stack.imgur.com/W7pdx.png" alt="enter image description here"></p>
  
  <p>however I want that link to be :</p>
  
  <p><img src="https://i.stack.imgur.com/y6wkI.png" alt="enter image description here"></p>
  
  <p>How can I achieve this in d3?</p>