Skip to content

Instantly share code, notes, and snippets.



Last active Feb 16, 2018
What would you like to do?
Drag circles
<!DOCTYPE html>
<meta charset="utf-8">
.active {
stroke: #000;
stroke-width: 2px;
<script src="//"></script>
<svg width="800" height="480"></svg>
var svg ="svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = 60;
var circles = d3.range(5).map(function (i) {
return {
x: (i+1)*width /6,
y: 250,
id: i+1
var color = d3.scaleOrdinal()
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", radius)
.style("fill", function (d, i) { return color(i); })
.on("mouseover", function (d) {"cursor", "move");})
.on("mouseout", function (d) {})
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
function dragstarted(d) {"active", true);
function dragged(d) {"cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
function dragended(d) {"active", false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment