d3 polygon

by Amanda Williamson

JavaScript

var svg = d3.select('body')
            .append('svg')
            .attr({'width': 500, 'height': 500})
            .style({'border': 'solid 1px black'});

var line, point, pathArray = [], isClicking = false, firstClick = true,
    m1, m2, x, y, lastX, lastY;

var lineFunction = d3.svg.line()
                    .x(function(d) { return d.x; })
                    .y(function(d) { return d.y; })
                    .interpolate("linear");
   
svg.on('mousedown', mousedown);
function mousedown() {
    m1 = d3.mouse(this);
    x =  m1[0], y =  m1[1];
    isClicking = true;
    point = svg.append('circle')
        .attr('cx', m1[0])
        .attr('cy', m1[1])
        .attr('r', 10)
        .attr('fill', 'gray');  
    if (firstClick) {
        pathArray = [ { 'x': x, 'y': y }, {'x': x, 'y': y} ];
        line = svg.append('path')
                .attr('d', lineFunction(pathArray))
                .attr({'stroke': 'purple', 'stroke-width': 5, 'fill': 'none'});
        firstClick = !firstClick;
    } else {
          if (lastX == m1[0] && lastY == m1[1]) {
                isClicking = false;
                lastX = null;
                lastY = null;
                line.attr('fill','black');
                firstClick = true;
               pathArray[pathArray.length-1] = {'x': x, 'y': y};
            } else {
                lastX = m2[0];
                lastY = m2[1];
                pathArray[pathArray.length] = {'x': lastX, 'y': lastY};
            }  
    }
}
svg.on('mousemove', mousemove);
function mousemove() {
    if(isClicking){
        m2 = d3.mouse(this);
        line.attr('d', lineFunction(pathArray));
        pathArray[pathArray.length-1] = {'x': m2[0], 'y': m2[1]};
    }
    
}