Draw with mouse on d3 chart with Clear button

by Jerimy Brown

HTML

<button id="erase">Erase</button>

CSS

line {
    stroke: black;
    stroke-width: 1px;
}

svg {
  background: #ddd;
  font: 10px sans-serif;
}

.line {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
  stroke-dasharray: 2,5;
}

JavaScript

var margin = {top: 10, right: 10, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


var npoints = 100;
var ptdata = [];
var mouseIsDown = false;

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d, i) { return d[0]; })
    .y(function(d, i) { return d[1]; });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom).append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var svgagain = d3.select("body").select("svg") 
    .on("mousemove", mousemove)
    .on("mousedown", mousedown)
    .on("mouseup", mouseup);


var path = svg.append("g")
  .append("path")
    .data([ptdata])
    .attr("class", "line")
    .attr("d", line);

function mousedown() {
   //console.log('mousedown');
   mouseIsDown = true;
}

function mousemove() {
    //console.log('mousemove');
    //console.log(mouseIsDown);
    if (mouseIsDown) {
        //console.log(ptdata);
        var pt = d3.mouse(this);
        ptdata.push(pt);
        path
          .attr("d", function(d) { return line(d);})
        //console.log(ptdata);
    }
}

function mouseup() {
    //console.log('mouseup');
    mouseIsDown = false;
}

function erase(){
    //console.log('erase');
    //console.log(ptdata);
    ptdata = [];
    d3.select('svg').remove();
    
    var line = d3.svg.line()
        .interpolate("basis")
        .x(function(d, i) { return d[0]; })
        .y(function(d, i) { return d[1]; });

    svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom).append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top  + ")");

    svgagain = d3.select("body").select("svg") 
        .on("mousemove", mousemove)
        .on("mousedown", mousedown)
        .on("mouseup",...