title: Bezier curve with mouse event
body: <p>I want to draw a bezier curve with mouse event.</p>
  
  <pre><code>function draw(selection)
  {
      var keep = false, path, xy0;
      line = d3.svg.line()
          .interpolate(function(points) {return points.join("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); })
          .x(function(d) {return d[0];})
          .y(function(d) {return d[1];});
  
      selection
          .on('mousedown', function() {
              keep = true;
              xy0 = d3.mouse(this);
              path = d3.select('svg')
                  .append('path')
                  .attr('d', line([xy0, xy0]))
                  .style({'stroke': 'black', 'stroke-width': '3px'});
          })
          .on('mouseup', function() {
              keep = false;
          })
          .on('mousemove', function(){
              if(keep) {
                  Line = line([xy0, d3.mouse(this).map(function(x) {return x - 1;})]);
                  console.log(Line);
                  path.attr('points', Line);
              }
          });
  }
  </code></pre>
  
  <p>But it doesn't work. Do you have an idea how to do that?</p>
  
  <p>Thanks in advance,</p>