score:2

Accepted answer

In the drag function, simply constrain the max and min values for the circle cx and cy attributes based on the SVG width/height and circle radius:

function drag(d) {
    d[0] = Math.max(Math.min(d3.event.x,width-100-32),-100+32);
    d[1] = Math.max(Math.min(d3.event.y,height-100-32),-100+32);
    d3.select(this).attr("cx", d[0]).attr("cy", d[1]);
}

Here's an updated fiddle

The -100 is to account for the translation that has previously been applied. 32 is the radius of the large circle (during drag).


Related Query

More Query from same tag