Skip to content

Instantly share code, notes, and snippets.

@trtg
Created December 29, 2012 09:33
Show Gist options
  • Save trtg/4405751 to your computer and use it in GitHub Desktop.
Save trtg/4405751 to your computer and use it in GitHub Desktop.
d3 tributary one circle orbiting another on drag
{"description":"One circle orbiting another on drag","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":false,"vim":true,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.7,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}
var svg = d3.select("svg");
var cx = tributary.sw/2;
var cy = tributary.sh/2;
var outr = 200;
var outer = svg.append("circle")
.attr({
cx: tributary.sw/2,
cy: tributary.sh/2,
r:outr,
fill: "none",
stroke: "#1B8600",
"stroke-width":4
});
var electron = svg.append("circle")
.attr({
cx: tributary.sw/2,
cy: tributary.sh/2,
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment