Skip to content

Instantly share code, notes, and snippets.

@georules
Created June 4, 2013 16:32
  • 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 georules/5707388 to your computer and use it in GitHub Desktop.
curve line connections
{"description":"curve line connections","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}},"fullscreen":false,"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,"thumbnail":"http://i.imgur.com/dhsmlCO.png"}
var svg = d3.select('svg')
var drag1 = d3.behavior.drag()
.on("drag", function(d) {
//console.log(d);
dx = d3.event.dx;
dy = d3.event.dy;
cx = con.line[3].x += dx;
cy = con.line[3].y += dy;
con.line[2].x = con.line[3].x-20;
con.line[2].y = con.line[3].y-20;
d3.select("circle").attr({
cx: cx,
cy: cy
});
d3.select("path").attr('d',lineFunction(con.line));
});
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("basis")
baseX = 175;
baseY = 50;
var lineData = [ { "x": baseX, "y": baseY}, { "x": baseX+20, "y": baseY},
{ "x": baseX+200, "y": baseY+200}, { "x": baseX+220, "y": baseY+200}];
var con = { line : lineData,
dotr: 8
};
console.log(con);
//console.log(con.dot.x);
apath =svg.append("path").attr("d", lineFunction(con.line)).attr("stroke","red")
.attr("fill","none");
svg.append("circle")
.attr("r",con.dotr)
.attr("cy",con.line[3].y)
.attr("cx",con.line[3].x)
.datum(con)
.call(drag1);
//console.log(con);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment