Skip to content

Instantly share code, notes, and snippets.

@enjalot
Last active January 4, 2016 18:59
Show Gist options
  • Save enjalot/8664421 to your computer and use it in GitHub Desktop.
Save enjalot/8664421 to your computer and use it in GitHub Desktop.
dragging an electron (result)

such force

drag me!

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
svg {
width: 960px;
height: 500px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<svg></svg>
<script>
var svg = d3.select("svg");
var cx = 960/2;
var cy = 500/2;
var outr = 200;
var outer = svg.append("circle")
.attr({
cx: cx,
cy: cy,
r: outr,
fill: "none",
stroke: "#1B8600",
"stroke-width": 4
});
var electron = svg.append("circle")
.attr({
cx: cx + outr,
cy: cy,
r: 15,
fill: "#067BA8"
});
var drag = d3.behavior.drag()
.on("drag", function() {
var mx = d3.mouse(this)[0];
var my = d3.mouse(this)[1];
var omega = Math.atan2(mx - cx, my - cy);
var nx = outr * Math.sin(omega);
var ny = outr * Math.cos(omega);
electron.attr({
cx: cx + nx,
cy: cy + ny
})
})
electron.call(drag);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment