jquery 또는 javascript를 사용하여 자동으로 요소 간 줄을 그립니다.

Question

Gantt 차트 레이아웃을 작성 했으므로 작업간에 연결선을 그릴 수 있어야합니다. 작업은 배경색과 높이, 너비 등으로 구성된 div입니다. div에 속성을 추가하여 어떤 작업이 관련되어 있는지 지정합니다.

작업 div의 오프셋을 기준으로 관련 작업간에 선을 자동으로 그리는 방법은 무엇입니까?

여기에 사용할 수있는 라이브러리가 있습니까? 아니면 어디서 수동으로 프로그래밍해야합니까?

Answer 1

결국 gantt.twproject.com/distrib/gantt.html의 코드를 내 자신의 Gantt 차트로 작업하도록 수정했습니다. 다음 절은 제가 사용했던 부분입니다. 그리고 이것은 생각해야 할 html 기반 gantt 차트에서 작동하도록 변경할 수 있습니다.

/*********************************** Draw Link Elements **************************************/ 

var peduncolusSize = 5; 
var lineSize = 0; 


function drawlink (from, to, type) { 

var rectFrom = buildRect(from); 
var rectTo = buildRect(to); 

// Dispatch to the correct renderer 
if (type == 'start-to-start') { 
    $("#gantt").append(
     drawStartToStart(rectFrom, rectTo, peduncolusSize) 
    ); 
} else { 
    $("#gantt").append(
     drawStartToEnd(rectFrom, rectTo, peduncolusSize) 
    ); 
} 

} 

/** 
* A representation of a Horizontal line 
*/ 
HLine = function(width, top, left) { 
var hl = $("<div>").addClass("taskDepLine"); 

hl.css({ 
    height: lineSize, 
    left: left, 
    width: width, 
    top: top - lineSize/2 -2 //added - 1 
}); 
    return hl; 
}; 

/** 
* A representation of a Vertical line 
*/ 

VLine = function(height, top, left) { 
var vl = $("<div>").addClass("taskDepLine"); 

vl.css({ 
    height: height -2,//added -2 
    left:left - lineSize/2, 
    width: lineSize, 
    top: top 
}); 
return vl; 
}; 

/** 
* Given an item, extract its rendered position 
* width and height into a structure. 
*/ 
function buildRect(item) { 
    var rect = item.position(); 
    rect.width = item.width(); 
    rect.height = item.height(); 

    return rect; 
    } 

/** 
    * The default rendering method, which paints a start to end dependency. 
* 
* @see buildRect 
*/ 
function drawStartToEnd(rectFrom, rectTo, peduncolusSize) { 
var left, top; 
var gheight = $('.main_table').innerHeight(); 
var gleft = -5; 

var ndo = $("<div style='position: relative;'> </div>").css({ 
    "bottom":gheight, 
    "left":-5 
    }); 

var currentX = rectFrom.left + rectFrom.width; 
var currentY = rectFrom.height/2 + rectFrom.top; 

var useThreeLine = (currentX + 2 * peduncolusSize) < rectTo.left; 

if (!useThreeLine) { 
    // L1 
    if (peduncolusSize > 0) { 
     var l1 = new HLine(peduncolusSize, currentY, currentX); 
     currentX = currentX + peduncolusSize; 
     ndo.append(l1); 
    } 

    // L2 
    var l2_4size = ((rectTo.top + rectTo.height/2) - (rectFrom.top + rectFrom.height/2))/2; 
    var l2; 
    if (l2_4size < 0) { 
     l2 = new VLine(-l2_4size, currentY + l2_4size, currentX); 
    } else { 
     l2 = new VLine(l2_4size, currentY, currentX); 
    } 
    currentY = currentY + l2_4size; 

    ndo.append(l2); 

    // L3 
    var l3size = rectFrom.left + rectFrom.width + peduncolusSize - (rectTo.left - peduncolusSize); 
    currentX = currentX - l3size; 
    var l3 = new HLine(l3size, currentY, currentX); 
    ndo.append(l3); 

    // L4 
    var l4; 
    if (l2_4size < 0) { 
     l4 = new VLine(-l2_4size, currentY + l2_4size, currentX); 
    } else { 
     l4 = new VLine(l2_4size, currentY, currentX); 
    } 
    ndo.append(l4); 

    currentY = currentY + l2_4size; 

    // L5 
    if (peduncolusSize > 0) { 
     var l5 = new HLine(peduncolusSize, currentY, currentX); 
     currentX = currentX + peduncolusSize; 
     ndo.append(l5); 

    } 
} else { 
    //L1 
    var l1_3Size = (rectTo.left - currentX)/2; 
    var l1 = new HLine(l1_3Size, currentY, currentX); 
    currentX = currentX + l1_3Size; 
    ndo.append(l1); 

    //L2 
    var l2Size = ((rectTo.top + rectTo.height/2) - (rectFrom.top + rectFrom.height/2)); 
    var l2; 
    if (l2Size < 0) { 
     l2 = new VLine(-l2Size, currentY + l2Size, currentX); 
    } else { 
     l2 = new VLine(l2Size, currentY, currentX); 
    } 
    ndo.append(l2); 

    currentY = currentY + l2Size; 

    //L3 
    var l3 = new HLine(l1_3Size, currentY, currentX); 
    currentX = currentX + l1_3Size; 
    ndo.append(l3); 
} 

//arrow 
var arr = $("<img src='custom/modules/Project/linkArrow.png'>").css({ 
    position: 'absolute', 
    top: rectTo.top + rectTo.height/2 - 6,//added -6 
    left: rectTo.left - 5 
}); 

ndo.append(arr); 

return ndo; 
} 

    /** 
    * A rendering method which paints a start to start dependency. 
    * 
    * @see buildRect 
    */ 
    function drawStartToStart(rectFrom, rectTo, peduncolusSize) { 
     var left, top; 
     var gheight = $('.main_table').innerHeight(); 
     var ndo = $("<div style='position: relative;'> </div>").css({ 
     "bottom":gheight, 
     "left":-5 
    }); 

var currentX = rectFrom.left; 
var currentY = rectFrom.height/2 + rectFrom.top; 

var useThreeLine = (currentX + 2 * peduncolusSize) < rectTo.left; 

if (!useThreeLine) { 
    // L1 
    if (peduncolusSize > 0) { 
     var l1 = new HLine(peduncolusSize, currentY, currentX - peduncolusSize); 
     currentX = currentX - peduncolusSize; 
     ndo.append(l1); 
    } 

    // L2 
    var l2_4size = ((rectTo.top + rectTo.height/2) - (rectFrom.top + rectFrom.height/2))/2; 
    var l2; 
    if (l2_4size < 0) { 
     l2 = new VLine(-l2_4size, currentY + l2_4size, currentX); 
    } else { 
     l2 = new VLine(l2_4size, currentY, currentX); 
    } 
    currentY = currentY + l2_4size; 

    ndo.append(l2); 

    // L3 
    var l3size = (rectFrom.left - peduncolusSize) - (rectTo.left - peduncolusSize); 
    currentX = currentX - l3size; 
    var l3 = new HLine(l3size, currentY, currentX); 
    ndo.append(l3); 

    // L4 
    var l4; 
    if (l2_4size < 0) { 
     l4 = new VLine(-l2_4size, currentY + l2_4size, currentX); 
    } else { 
     l4 = new VLine(l2_4size, currentY, currentX); 
    } 
    ndo.append(l4); 

    currentY = currentY + l2_4size; 

    // L5 
    if (peduncolusSize > 0) { 
     var l5 = new HLine(peduncolusSize, currentY, currentX); 
     currentX = currentX + peduncolusSize; 
     ndo.append(l5); 
    } 
} else { 
    //L1 

    var l1 = new HLine(peduncolusSize, currentY, currentX - peduncolusSize); 
    currentX = currentX - peduncolusSize; 
    ndo.append(l1); 

    //L2 
    var l2Size = ((rectTo.top + rectTo.height/2) - (rectFrom.top + rectFrom.height/2)); 
    var l2; 
    if (l2Size < 0) { 
     l2 = new VLine(-l2Size, currentY + l2Size, currentX); 
    } else { 
     l2 = new VLine(l2Size, currentY, currentX); 
    } 
    ndo.append(l2); 

    currentY = currentY + l2Size; 

    //L3 

    var l3 = new HLine((rectTo.left - rectFrom.left), currentY, currentX); 
    currentX = currentX + peduncolusSize + (rectTo.left - rectFrom.left); 
    ndo.append(l3); 
} 

//arrow 
var arr = $("<img src='custom/modules/Project/linkArrow.png'>").css({ 
    position: 'absolute', 
    top: rectTo.top + rectTo.height/2 - 6,//changed to -6 
    left: rectTo.left - 5 
}); 

ndo.append(arr); 

return ndo; 

}