D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Stroked
Full window
Github gist
Drag Multiples
forked from
GerHobbelt
's block:
Drag Multiples
<!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>
https://d3js.org/d3.v3.min.js