just another inlet to tributary

inlet.js

var x_scale = d3.scale.linear().domain([0,100]).range([0,200]);

var p1 = {x:0, y:0};
var p2 = {x:119, y:0, b1:100, b2:100};
var p3 = {x:0, y:100};
var p4 = {x:100, y:100, b1:100, b2:100};


var graph = [p1,p2,p3,p4];
var typeList = ['M','Q','L','Q'];
var adjacentList =[
  				   [0,1,0,0],
                   [0,0,1,0],
  				   [0,0,0,1],
                   [0,0,0,0]
                  ];

var topList = [1,1,0,0];

var pathWay = '';
for(i in graph){
  var point = graph[i];
  var addPath = typeList[i]+point.x+','+point.y+' ';
  if(typeList[i] == 'Q')
    addPath = typeList[i]+point.b1+','+point.b2+' '+point.x+','+point.y+' ';
  pathWay += addPath
}

g.append('path').attr('d',pathWay)
  .attr('fill','none')
    .attr('stroke','black')
    .attr('stroke-width','3')
  
var slideWidth = 200;
g.append("line")
  .attr("x1",0)
  .attr("y1",50)
  .attr("x2",slideWidth)
  .attr("y2",50)
  .attr('id','slide')
  .style("stroke-width", 5)
  .style("stroke", "steelblue")
    .attr("transform", "translate(100,100)")
  
var drag = d3.behavior.drag().on("drag", function(d,i) {
  var x  = d3.mouse(this)[0];
  console.log(x);
  if(x > -100 && x < slideWidth-100)
    d3.select(this).attr('cx',x);

}  );
  
g.append('circle')
  .attr('r',10)
  .attr('id','handler')
  .attr("transform", "translate(200,150)")
  .call(drag)