d3 polygon - drag and resize

by Paolo Favero

CSS

svg {
    border: 1px solid;
}
path{
    fill: lightsalmon;
    stroke: salmon;    
    stroke-width: 5px;
}

JavaScript

var svg = d3.select('body').append('svg').attr({'width': 500, 'height': 500});            
var path, pathArray = [], isClicking = false, firstClick = true, count = 4,
    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-closed");
var dragP = d3.behavior.drag().on('drag', dragPath), 
    dragC = d3.behavior.drag().on('drag', dragCircle);
function dragPath(dataSource) {
    console.log('dragPath', dataSource);
    path.attr('fill', 'gray');
    var e = d3.event;
    pathArray.forEach(function(datum, index){
        datum.x += e.dx;
        datum.y += e.dy;
    });
    updatePath();
    updateCircle();
}
function dragCircle(dataSource) {
    console.log('dragCircle', dataSource);
    var e = d3.event;
    dataSource.x += e.dx;
    dataSource.y += e.dy;
    updateCircle();
    updatePath();    
}
function updatePath(){
    if(!path){
        path = svg.append('path');  
    }    
    path.attr('d', lineFunction(pathArray)).attr('fill', 'none'); 
}
function drawCircle(){
    circle = svg.selectAll('circle').data(pathArray);    
    circle.enter().append('circle').attr('r', 10); 
    circle.attr('cx', function(d) { return d.x; })
          .attr('cy', function(d) { return d.y; });      
}
function updateCircle(){        
    circle.attr('cx', function(d) { return d.x; })
          .attr('cy', function(d) { return d.y; });     
}
function intersects(x, y, cx, cy, r) {    
    var dx = x-cx,
        dy = y-cy;   
    return dx*dx + dy*dy <= r*r;
}
svg.on('mousedown', mousedown);
function mousedown() {
    m1 = d3.mouse(this); 
    console.log(m1, m2);
    for (var i = 0; i < pathArray.length - 1; i++) {
        var dataPt = pathArray[i];
        if(intersects(m2[0], m2[1], dataPt.x, dataPt.y, 10)){
            console.log(i); 
            isClicking = false;        
            path.attr('fill','gray');
           ...