d3 draggable circle

by Amanda Williamson

CSS

circle {
    fill: purple;
}

JavaScript

var width = 500, height = 500, 
        cx = 200, cy = 200, radius = 50;

var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);


var drag = d3.behavior.drag()
     .on("drag", dragmove);
    

svg.append("circle")
    .attr("cx",cx)
    .attr("cy",cy)
    .attr("r",radius)
    .call(drag);


function dragmove(d) {
    console.log('drag');    
    d3.select(this)
        .attr("cx", Math.max(radius, Math.min(width - radius, d3.event.x)))
        .attr("cy", Math.max(radius, Math.min(height - radius, d3.event.y)));
}