title: D3js - Smooth transition between 2 paths
body: <p>I am 2 very different path and I'd like to smoothly change one to make it look like the other one. I have tried using the .transition() method applied on the "d" attribute but it gives very poor results.</p>
  
  <p>Here is an example:
  <a href="http://jsfiddle.net/yya0m0s0/1/" rel="nofollow">http://jsfiddle.net/yya0m0s0/1/</a></p>
  
  <p>The d3 code I used is the following:</p>
  
  <pre><code>   var svg = d3.select("body")
                .append('svg')
                .attr('width', '375px')
                .attr('height', '490px');
  
  
      svg.append('path').attr('d', d_t0);
      svg.selectAll('path').transition()
                           .duration(3500).delay(1000)
                           .attr('d', d);
  </code></pre>
  
  <p>What is the best way to create the kind of transformations?</p>
  
  <p>Many thanks</p>