title: d3.js Sankey Link Transition not transitioning in-place (jsbin provided)
body: <p>Here is my jsbin: <a href="https://jsbin.com/fepakitayi/edit?html,output" rel="nofollow">https://jsbin.com/fepakitayi/edit?html,output</a></p>
  
  <p>Press the "transition" button to transition graph.</p>
  
  <p>Everything is working fine (text is transitioning, titles are transitioning, nodes are transitioning) and the links are transitioning but for some reason they scatter about and THEN change sizes; that is, they disconnect from the two nodes they are attached to ad reconnect to two different nodes. Is there a way to make the links transition to the new size in-place? For example, I'd like for them to transition WITH the nodes and only shift if their respective node shifts. </p>
  
  <p>BTW, jsbin didn't have an option to add the d3.sankey library so I had to put that in with my js so it's a bit cluttered, but my code is at the bottom of the javascript section. </p>
  
  <p>Relevant code:</p>
  
  <p>After the <code>on('click'</code> event, I update the <code>graph.links</code> and then transition to the new <code>graph.links</code> with new stroke-width.</p>
  
  <pre><code>link
    // svg.selectAll(".link")
        .data(graph.links)
        .transition()
        .duration(1000) 
        .attr("class", "link")
        .attr("d", path)
        .style("stroke-width", function(d) { return Math.max(1, d.dy); })
  </code></pre>
  
  <p>I've searched google for d3.sankey transitions but didn't find much.</p>