curve line connections

_.md

[ Launch: curve line connections ] 5706891 by georules

config.json

{"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/czxhVwp.png"}

inlet.js

var svg = d3.select('svg')

var drag1 = d3.behavior.drag()
.on("drag", function(d)	{
  d.y=d3.event.y;
  d.x=d3.event.x;
  console.log("hi");
  
});

var lineData = [ { "x": 10,   "y": 5},  { "x": 20,  "y": 20},
                { "x": 37,  "y": 3}, { "x": 60,  "y": 83},
                { "x": 166,  "y": 5},  { "x": 260, "y": 115}];

var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("basis")

var lineGraph = svg.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");

curve = svg.append('path')
                 .attr('d', 'M100,200 C100,100 250,100 250,200 S400,300 400,200 Z')
                 .attr('stroke', '#000')
                    .attr('fill-opacity', 0);


var lineData = [ { "x": 50,   "y": 400},  { "x": 80,  "y": 430},
                { "x": 260,  "y": 500},  { "x": 280, "y": 520}];

apath =svg.append("path").attr("d", lineFunction(lineData)).attr("stroke","red")
.attr("fill","none");

svg.append("circle").attr("r",10).attr("cy",520).attr("cx",280).call(drag1);



//apath.transition().attr('d', 'M60,100 C150,150 650,100 550,200S400,300 400,250');