d3js curves

JavaScript

var startPoint = {x:300, y:200};
//var controlPoint = [50,100];

var dataset = [{x:50,y:200},{x:550,y:200},{x:550,y:400}, {x:50, y:400}];
var currentPoint = {x:50, y:200};

var getControlPoint = function(curPoint){
    var sx = startPoint.x, 
        sy = startPoint.y, 
        ex = curPoint.x, 
        ey = curPoint.y;
    if (sx == ex) ex = ex + 1;
    if (sy == ey) ey = ey + 1;
    
    var cx = (sx + ex) / 2, // Координаты центра отрезка
        cy = (sy + ey) / 2,
        k = (ey - sy)/(ex - sx), // Коэффициент наклона отрезка
        kp = (1/k), // Коэффициент наклона перпендикуляра
        angle = Math.atan(kp); // угол наклона перпендикуляра
    
    var pLength = Math.sqrt((ex - sx)*(ex - sx) + (ey - sy)*(ey - sy)); // Длина отрезка
    var hLength = 0.4 * pLength; // Длина перпендикуляра
    
    var dy = 0, // Приращение по x
        dx = 0, // Приращение по y
        px = 0, // Координаты нужной точки
        py = 0;
    
    // 1 четверть
    if (ex > sx && ey < sy) {
        console.log('1 четверть');
        dy = hLength * Math.sin(Math.PI - angle);
        dx = hLength * Math.cos(Math.PI - angle);
        px = cx + dx;
        py = cy + dy;
    }
    
    // 2 четверть
    if (ex < sx && ey < sy) {
        console.log('2 четверть');
        dy = hLength * Math.sin(angle);
        dx = hLength * Math.cos(angle);
        px = cx + dx;
        py = cy - dy;
    }
    
    // 3 четверть
    if (ex < sx && ey > sy) {
        console.log('3 четверть');
        dy = hLength * Math.sin(Math.PI - angle);
        dx = hLength * Math.cos(Math.PI - angle);
        px = cx + dx;
        py = cy + dy;
    }
    
    // 4 четверть
    if (ex > sx && ey > sy) {
        console.log('4 четверть');
        dy = hLength * Math.sin(angle);
        dx = hLength * Math.cos(angle);
        px = cx + dx;
        py = cy - dy;
    }
    return {x: px, y: py};
}


var svg = d3.select("body").append('svg').attr('width', 600).attr('height', 600);

var clip =...