a7cefb6285c46ad20258 by mccannf

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  float: left;
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  margin-right: -1px;
  margin-bottom: -1px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 240,
    height = 125,
    radius = 20;

var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("drag", dragmove);

var svg = d3.select("body").append("div").selectAll("svg")
    .data(d3.range(16).map(function() { return {x: width / 2, y: height / 2}; }))
  .enter().append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("circle")
    .attr("r", radius)
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .call(drag);

function dragmove(d) {
  d3.select(this)
      .attr("cx", d.x = (d3.event.x < (width - radius) ? Math.max(radius,width - radius) : width / 2 ) )
      .attr("cy", d.y = (d3.event.y < (height - radius) ? Math.max(radius,height - radius) : height / 2 ) );
}

</script>