Соединение узлов линиями с использованием Javascript / JQuery и HTML (без холста)

Я близок, но моя математика все испортила где-то или что-то в этом роде...

Вот сценарий текущего состояния.

Вот узлы и строки:

drawnode(entity, 200, 200);
drawnode(entity, 200, 300);
drawnode(entity, 400, 300);

drawline(200, 200, 200, 300);
drawline(200, 300, 400, 300);
drawline(400, 300, 200, 200);

Вот результат:

Вот мои две функции:

function drawnode(x, y) {

    var ele = ""
    var style = "";
    style += "position:absolute;";
    style += "z-index:100;"
    ele += "<div class='relNode' style="+ style + ">";
    ele += "<span> Test Node</span>"
    ele += "<div>"

    $('#rPaper').show();
    var node = $(ele).appendTo('#rPaper');
    var width = node.width();
    var height = node.height();

    var centerX = width / 2;
    var centerY = height / 2;

    var startX = x - centerX;
    var startY = y - centerY;

    node.css("left", startX).css("top", startY);

}

function drawline(ax, ay, bx, by) {
    if (ay > by) {
        bx = ax + bx;
        ax = bx - ax;
        bx = bx - ax;
        by = ay + by;
        ay = by - ay;
        by = by - ay;
    }
    var calc = Math.atan((ay - by) / (bx - ax));
    calc = calc * 180 / Math.PI;
    var length = Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by));
    var style = ""
    style += "height:" + length + "px;"
    style += "width:1px;"
    style += "background-color:black;"
    style += "position:absolute;"
    style += "top:" + (ay) + "px;"
    style += "left:" + (ax) + "px;"
    style += "transform:rotate(" + calc + "deg);"
    style += "-ms-transform:rotate(" + calc + "deg);"
    style += "transform-origin:0% 0%;"
    style += "-moz-transform:rotate(" + calc + "deg);"
    style += "-moz-transform-origin:0% 0%;"
    style += "-webkit-transform:rotate(" + calc + "deg);"
    style += "-webkit-transform-origin:0% 0%;"
    style += "-o-transform:rotate(" + calc + "deg);"
    style += "-o-transform-origin:0% 0%;"
    style += "-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
    style += "box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
    style += "z-index:99;"
    $("<div style='" + style + "'></div>").appendTo('#rPaper');
}

Я уверен, что это что-то ужасно глупое.

Кредит для функции drawline подходит к этому SO-решению, хотя я его модифицировал и как-то сломал.