title: d3 update data and update graph
body: <p>I have the following simple line in d3 but haven't an issue trying to figure out how to pass it data2 and update the line to reflect the change.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;D3 Line Chart Demo&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;    
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  
      &lt;script src="jquery.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="d3.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
    &lt;body&gt;
      &lt;button class="first last" onclick="transition()"&gt;
          Update
        &lt;/button&gt;
      &lt;div id="chart"&gt;&lt;/div&gt;
    &lt;/body&gt;
  
    &lt;script&gt;
  
      var data = [3, 7, 9, 1, 4, 6, 8, 2, 5];
      var data2 = [3, 7, 9, 1, 4, 6, 8, 2, 15];
      var width = 600;
      var height = 400;
      var max = d3.max(data);
  
      x = d3.scale.linear().domain([0, data.length - 1]).range([0, width]);
      y = d3.scale.linear().domain([0, max]).range([height, 0]);
  
      vis = d3.select('#chart')
          .style('margin', '20px auto')
          .style('width', "" + width + "px")
          .append('svg:svg')
          .attr('width', width)
          .attr('height', height)
          .attr('class', 'viz')
          .append('svg:g');
  
      vis.selectAll('path.line')
          .data([data])
          .enter()
          .append("svg:path")
          .attr("d", d3.svg.line().x(function(d, i) {
            return x(i);
          })
          .y(y));
    &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>