just another inlet to tributary

inlet.js

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

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 path = g.append('path');

drawPath();
  
var slideWidth = 200;
g.append("line")
  .attr("x1",0)
  .attr("y1",50)
  .attr("x2",slideWidth)
  .attr("y2",50)
  .attr('id','slide')
  .style("stroke-width", 1)
  .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);
  
  for(i in graph){
    if(topList[i] == 1){
      var point = graph[i];
      point.y = x_scale(x);
    
    }
  	drawPath()
  }
  

}  );
  
g.append('circle')
  .attr('r',10)
  .attr('id','handler')
  .attr("transform", "translate(200,150)")
  .call(drag)
  
function drawPath(){
  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
  }
	path.attr('d',pathWay)
  .attr('fill','none')
    .attr('stroke','black')
    .attr('stroke-width','3')
}