D3 Examples - Drag Multiples

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
svg {
  float: left;
  border: solid 1px #aaa;
}
​
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<body>
<script>
​
var width = 238,
    height = 123,
    radius = 20;
​
var drag = d3.behavior.drag()
    .origin(Object)
    .on("drag", dragmove);
​
var svg = d3.select("body").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 = Math.max(radius, Math.min(width - radius, d3.event.x)))
      .attr("cy", d.y = Math.max(radius, Math.min(height - radius, d3.event.y)));
}
​
</script>
​
    