Skip to content

Instantly share code, notes, and snippets.

@bennekrouf
Last active May 4, 2016 18:54
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save bennekrouf/eeff0180336e8442581e0ecd431ab7f4 to your computer and use it in GitHub Desktop.
extensible rect
{"description":"extensible rect","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"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,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}
var dragR = d3.behavior.drag().on('drag', dragRect);
var svg = d3.select("svg").call(dragR)
var rect, x0 = 200, y0=62, width0=100, height0=53, cx0=290, cy0=100;
var rectData ={x:x0, y:y0};
function updateRect(){
rect = svg.append("rect")
.attr({width: width0, height: height0, x: rectData.x, y: rectData.y, fill: "#3BA360", rx: 5}).call(dragR)
svg.append("circle").attr({"r": 5, "fill": "green", "cx": cx0, "cy": cy0 - 20 })
svg.append("circle").attr({"r": 5, "fill": "green", "cx": cx0, "cy": cy0 });
}
updateRect();
function dragRect(d){
var e = d3.event;
d3.select(rect)
.attr('x', rectData.x += e.dx)
.attr('y', rectData.y += e.dy)
;
updateRect();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment