title: D3 Transition. Working with multiple lines on line graph and would like to transition smoothly between lines when button is pressed
body: <p>I've got a little line graph written in d3, and I would like it to behave in such a way that one svg line path is visible when the graph is opened, and then when a user clicks a button, I would like the existing svg line path to smoothly transition into a line path representing a new and slightly different dataset.</p>
  
  <p>I can transition regular attributes just fine, but it is transitioning the "d" attribute that has me stumped. The code is here</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var w = 500;
  var h = 300;
  var padding = 30;
  
  var dataset = [
    [1.3, 2015],
    [2.1, 2036.25],
    [3.4, 2057.5],
    [3.5, 2057.5],
    [4, 2100]
  ];
  
  //Create scale functions
  var yScale = d3.scale.linear()
    .domain([0, 4])
    .range([h - padding, padding]);
  
  var xScale = d3.scale.linear()
    .domain([2015, 2100])
    .range([padding, w - padding * 2]);
  
  //Define X axis
  var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");
  
  //Define Y axis
  var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");
  
  //Create SVG element
  var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
  
  var lineFunc = d3.svg.line()
    .x(function(d) {
      return xScale(d[1]);
    })
    .y(function(d) {
      return yScale(d[0]);
    })
    .interpolate('linear');
  
  svg.append('svg:path')
    .transition()
    .attr('d', lineFunc(dataset))
    .attr('class', 'dataline');
  
  
  //Create X axis
  svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);
  
  //Create Y axis
  svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);
  
  //create event listener and data reset functions
  d3.select("button")
    .on("click", function() {
      dataset = [
        [1, 2015],
        [2.05, 2036.25],
        [3.25, 2057.5],
        [3.3, 2057.5],
        [3.7, 2100]
      ];
      var dynamoBar = svg.append('svg:path')
        .transition()
        .attr("d", lineFunc(dataset))
        .attr("class", "dataline");
    })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        .axis path,
          .axis line {
            fill: black;
            stroke: none;
            shape-rendering: crispEdges;
          }
  
          .axis text {
            font-family: sans-serif;
            font-size: 11px;
          }
  
          .dataline {
            stroke: purple;
            stroke-width: 1;
            fill: none;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="button"&gt;Try it&lt;/button&gt;
  &lt;script type="text/javascript" src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>