title: How to update an svg path with d3.js
body: <p>I'd like to apply the <a href="https://gist.github.com/mbostock/3808218">"general update pattern"</a> from official documentation to update an svg path on the mouse event (but could be a button or whatever).</p>
  
  <p>But the the path is only added and not updated. I think it's why I'm not properly using the <code>enter</code> and <code>exit</code> property but after some various trial, I cannot manage to let it work.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/AKrda/">jsfiddle</a>.</p>
  
  <p>My js code is here:</p>
  
  <pre><code>var shapeCoords = [
                    [10, 10], [100, 10], [100, 100], [10, 100]                  
                    ];
  
  $(function() {
      var container = $('#container');
  
      // D3
      console.log("D3: ", d3);
  
      var svg = d3.select('#container')
                  .append('svg:svg')
                  .attr('height', 600)
                  .attr('width', 800);
  
      var line = d3.svg.line()
                      .x(function(d) { return d[0]; })
                      .y(function(d) { return d[1]; })
                      .interpolate('linear');
  
      function render() {
  
              svg.data(shapeCoords)
                  .append('svg:path')
                  .attr('d', line(shapeCoords) + 'Z')
                  .style('stroke-width', 1)
                  .style('stroke', 'steelblue');
      }
      render();
  
      var mouseIsDown = false;  
      container.on('mousedown mouseup mousemove', function(e) {
          if (e.type == 'mousedown') {
              mouseIsDown = true; 
              shapeCoords[3] = [e.offsetX, e.offsetY];
          } else if (e.type == 'mouseup' ){
              mouseIsDown = false;
              shapeCoords[3] = [e.offsetX, e.offsetY];
          } else if (e.type == 'mousemove') {
              if (mouseIsDown) {
                  shapeCoords[3] = [e.offsetX, e.offsetY];
                  render();
              }
          }
      });
  
  
  });
  </code></pre>
  
  <p>And the html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;D3 mousemove&lt;/title&gt;
      &lt;script type="text/javascript" 
              src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript" 
              src="http://mbostock.github.com/d3/d3.js"&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
      &lt;style&gt;
          #container { 
              width: 800px; 
              height: 600px; 
              border: 1px solid silver; }
          path, line {
              stroke: steelblue;
              stroke-width: 1;
              fill: none;
          }
      &lt;/style&gt;
  &lt;/head&gt; 
  &lt;body&gt;   
      &lt;div id="container"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>