結構圖前端實現

公司項目有個功能要實現樹形結構的展示，類似於組織架構的那種。

想了下幾種方案，

1. 　　 表格內實現
2. 　　 div內通過絕對定位實現
3. 　　 canva實現

想了一下，感覺第一種簡單一些， 用表格的話可能不需要計算繁瑣的定位，top，left什么的，不過用表格的壞處就是可擴展性差了些

粗略一想，大概設計方案如下：

• 　　后台組織好json格式數據返回前端，屬性結構肯定有id和pid字段
• 　　結構圖前端js+css展示，內容用帶邊框的方塊展示，關系用線條。

想玩就像立馬碼字實現，代碼還沒敲問題來了，樹形結構后面的分叉是動態的，該怎么實現呢？

於是我在紙上嘗試畫出圖形，從頂層開始畫，第一層一個節點 T，第二層兩個節點T1,T2。上下距離岔開點，我一想如果T1后面有3個節點，T2后面又有3個節點。在不知道第三次的情況下我之前T1,T2上下就留了一點位置，然后畫第三層就會得到示例的圖形： 

如果上圖不算丑，那遇到第三層4個，第二個節點也有，則位置會被占用，那必然會出現更加不好看的效果：

第一張圖如果我們事先知道是 1 2 6的結構，那我們肯定能畫的好看一些，如下

這時候我意識到我這邊除了之前考慮的那兩點外，我可能還需要計算方塊位置的算法，基於我們用table來實現位置的分布，方塊位置需要如下展示：

 

那么如何得到圖中的這個位置結構呢，首先知道這么畫我們是知道后面節點的位置的，所以我決定從后往前推，T4,T5,T6是同一個父節點下的葉子節點，那T3的位置是與T5平齊的，於是得到下圖：

如此可以得到T3位置，然后根據T2,T3得到T1的位置

當然這種子節點都在最后一層是理想結果，顯示並不是所有情況都是上面那樣，比如：

當然這只是簡單的情況，還有各種更多層更加復雜的結構。

圖中做了些改進，不同層之前間隔兩列，一個用來父節點延申，一列用來分叉到子節點。另外便於畫圖，初步設計是兩個子節點中間間隔一行，這樣父節點位置剛好在一個表格的td中間。

現在來說核心的算法，不是太復雜，就是首先算好葉子節點的位置，比如圖中的T3,T4,T5,T6,T8,T9。這些都可以通過遍歷json數據來得到，通過遞歸，我們能得到前面所說幾個節點的行和列的位置。

然后計算得到T2,T7位置，最后得出T1的位置。

得到方塊內容的位置，我們就需要連線，連線的大體思路就是，td里放DIV，通過設置div的邊框顏色和div的位置來繪制，小箭頭么可以設置border得到三角形。

當然要實現並不是這么容易，需要各種折騰寫樣式，最后我是通過div然后寫個before的偽類來實現線條，after偽類來實現箭頭。

另外一般頁面大小也就那么點大，為了減少點空間我去除了兩個葉子節點中間的行，不過這也給父節點的定位造成小小的麻煩，比如T6,T7 這兩個位置是在td中，而父節點則需要向上偏半個方塊的高度。當然方塊的高度是比td矮一些的，不然T6,T7就會碰一塊了。

最后效果如下：

js代碼如下：

$.fn.arch = function (rid, list) {
    var $tb = $(this);
    var maxRow = 0; //讀取葉子節點位置開始行
    var maxLevel = 0; //最大層級  
    readTree(list);
    initTable();
    drawTree();
    drawPath();

    function setLeaf(list) {
        for (var i = 0; i < list.length; i++) {
            var isleaf = 1;
            for (var j = 0; j < list.length; j++) {
                if (list[i].id == list[j].pid) {
                    isleaf = 0;
                    break;
                }
            }
            list[i].isleaf = isleaf;
        }
    }

    function readLeaf(list, pid, level) {
        maxLevel = Math.max(level, maxLevel);
        for (var i = 0; i < list.length; i++) {
            if (list[i].pid == pid) {
                list[i].level = level;
                if (!list[i].isleaf) {
                    readLeaf(list, list[i].id, level + 1);
                } else {
                    list[i].r = maxRow;
                    list[i].offset = 0;
                    maxRow++;
                }
            }
        }
    }

    function calcPosition() {
        var tmpList = [];
        for (var i = maxLevel; i > 0; i--) {
            for (var j = 0; j < list.length; j++) {
                if (list[j].level == i && tmpList.indexOf(list[j].pid) < 0) {
                    var total = 0;
                    var count = 0;
                    var pindex = -1;
                    var isOffset = 0;
                    for (var k = 0; k < list.length; k++) {
                        if (list[k].pid == list[j].pid) {
                            isOffset = list[k].offset;
                            total += list[k].r;
                            count++;
                        } else if (list[k].id == list[j].pid) {
                            pindex = k;
                        }
                    }
                    var last = total % count;

                    if (pindex >= 0) {
                        list[pindex].r = count == 0 ? 0 : ((total - last) / count + ((last > 0) ? 1 : 0));
                        list[pindex].offset = last > 0 ? 1 : 0;
                        if (count == 1) {
                            list[pindex].offset = isOffset;
                        } else {
                            list[pindex].offset = last > 0 ? 1 : 0;
                        }
                    }
                    tmpList.push(list[j].pid);
                }
            }
        }
    }

    function readTree(list) {
        setLeaf(list);
        readLeaf(list, rid, 1);
        calcPosition();
    }

    function drawTree() {
        for (var i = 0; i < list.length; i++) {
            var item = list[i];
            $tb.find("tr:eq(" + (item.r) + ")")
                .find("td:eq(" + (item.level - 1) * 3 + ")>div")
                .addClass("item-box" + (item.offset == 1 ? " offset" : ""))
                .attr("data-pid", item.pid)
                .attr("data-id", item.id)
                .attr("data-offset", item.offset)
                .append("<div class='item'>" + item.name + "</div>");
        }
    }


    function drawPath() {
        for (var i = 0; i < maxLevel; i++) {
            var targetColumn = (i - 1) * 3;
            var pNodes = $tb.find("tr").find("td:eq(" + targetColumn + ")>div[data-id]");
            for (var j = 0; j < pNodes.length; j++) {
                var $pNode = $(pNodes[j]);
                var $pTd = $pNode.closest("td");
                var isPOffset = $pNode.is("[data-offset='1']");

                var subNodes = $tb.find("tr").find("[data-pid='" + $pNode.attr("data-id") + "']");
                var length = subNodes.length;
                if (length == 0) {
                    continue;
                }

                var ptopCls = isPOffset ? "line-top" : "line-center";
                $pTd.next().children("div").addClass(ptopCls);

                if (length == 1) {
                    $(subNodes[0]).closest("td").prev().children("div").addClass(ptopCls + " arrow");
                } else if (length == 2) {
                    var startIndex = $(subNodes[0]).closest("tr").index();
                    var endIndex = $(subNodes[1]).closest("tr").index();

                    var firstOffset = $(subNodes[0]).is("[data-offset='1']");
                    var lastOffset = $(subNodes[1]).is("[data-offset='1']");

                    if (endIndex - startIndex == 1) {
                        if (firstOffset == lastOffset) {
                            $(subNodes[0]).closest("td").prev().children("div").addClass("corner-top-bottom " + (firstOffset ? "" : "top-35"));
                        } else if (firstOffset) {
                            $(subNodes[0]).closest("td").prev().children("div").addClass("corner-top arrow");
                            $(subNodes[1]).closest("td").prev().children("div").addClass("corner-bottom arrow top-35");
                        }
                    } else {
                        $(subNodes[0]).closest("td").prev().children("div").addClass("corner-top arrow " + (firstOffset ? "" : "top-35"));
                        !lastOffset && $(subNodes[1]).closest("td").prev().children("div").addClass("corner-bottom arrow top-35");

                        for (var m = startIndex + 1; m < endIndex; m++) {
                            if (m == endIndex - 1 && lastOffset) {
                                $tb.find("tr:eq(" + m + ")").find("td:eq(" + (targetColumn + 2) + ")").children("div").addClass("corner-bottom arrow");
                            } else {
                                $tb.find("tr:eq(" + m + ")").find("td:eq(" + (targetColumn + 2) + ")>div").addClass("line-left");
                                var currNodes = $tb.find("tr:eq(" + m + ")").find("td:eq(" + (targetColumn + 3) + ")").children(".item-box");
                                if (currNodes.length > 0) {
                                    var $currNode = $(currNodes[0]);
                                    var currOffset = $currNode.is("[data-offset='1']");
                                    var cls = currOffset ? "line-top arrow" : "line-center arrow";
                                    $tb.find("tr:eq(" + m + ")").find("td:eq(" + (targetColumn + 2) + ")").children("div").addClass(cls);
                                }
                            }
                        }
                    }
                } else {
                    var $firstNode = $(subNodes[0]);
                    var $lastNode = $(subNodes[length - 1]);

                    var firstOffset = $firstNode.is("[data-offset='1']");
                    $firstNode.closest("td").prev().children("div").addClass("corner-top arrow " + (firstOffset ? "" : "top-35"));

                    var lastOffset = $lastNode.is("[data-offset='1']");
                    !lastOffset && $(subNodes[length - 1]).closest("td").prev().children("div").addClass("corner-bottom arrow top-35");

                    var startIndex = $firstNode.closest("tr").index();
                    var endIndex = $lastNode.closest("tr").index();
                    for (var m = startIndex + 1; m < endIndex; m++) {
                        if (m == endIndex - 1 && lastOffset) {
                            $tb.find("tr:eq(" + m + ")").find("td:eq(" + (targetColumn + 2) + ")").children("div").addClass("corner-bottom arrow");
                        } else {
                            $tb.find("tr:eq(" + m + ")").find("td:eq(" + (targetColumn + 2) + ")>div").addClass("line-left");
                            var currNodes = $tb.find("tr:eq(" + m + ")").find("td:eq(" + (targetColumn + 3) + ")").children(".item-box");
                            if (currNodes.length > 0) {
                                var $currNode = $(currNodes[0]);
                                var currOffset = $currNode.is("[data-offset='1']");
                                var cls = currOffset ? "line-top arrow" : "line-center arrow";
                                $tb.find("tr:eq(" + m + ")").find("td:eq(" + (targetColumn + 2) + ")").children("div").addClass(cls);
                            }
                        }
                    }
                }
            }
        }
    }

    function initTable() {
        var rowCount = maxRow;
        var columnCount = maxLevel * 3 - 2;
        createTable(rowCount, columnCount);
    }

    function createTable(r, c) {
        for (var i = 0; i < r; i++) {
            var $tr = $("<tr class='item-row'></tr>");
            for (var j = 0; j < c; j++) {
                var last = j % 3;
                var cls = "";
                if (last == 0) {
                    cls = "td-item";
                } else if (last == 1) {
                    cls = "td-line";
                } else if (last == 2) {
                    cls = "td-arrow";
                }
                $tr.append("<td class='" + cls + "'><div></div></td>");
                //$tr.append("<td " + (isitem ? "data-item='1'" : "width='50px'") + "><div class='" + (isitem ? "" : "line-item") + "'><div>" + (isitem ? "</div></div>" : "") + "</td>");
            }
            $tb.append($tr);
        }
    }

}

 

css如下

.item-box {
    position: absolute;
    top: 3px;
    height: 100%;
}

    .item-box.offset {
        top: -35px;
    }

    .item-box .item {
        background-color: #c1dcfc;
        border: 2px solid #4499D6;
        border-radius: 10px;
        width: auto;
        height: 100%;
    }

    .item-box .item {
        height: 70px;
    }

.line-item {
}

.line-left {
    border-left: 1px solid #4499D6;
}

.line-center:before {
    content: ' ';
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #4499D6;
    position: absolute;
    top: 50%;
}

.line-center.arrow:after {
    top: 36px;
}

.line-top:before {
    content: ' ';
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #4499D6;
    position: absolute;
}

.line-top.arrow:after {
    top: -5px;
}

.corner-top:before {
    content: ' ';
    width: 100%;
    height: 100%;
    border-top: 1px solid #4499D6;
    border-left: 1px solid #4499D6;
    border-top-left-radius: 10px;
    display: inline-block;
    position: absolute;
}

.corner-top.top-35:before {
    top: 40px;
}

.corner-top.arrow:after {
    top: -5px;
}

.corner-top.arrow.top-35:after {
    top: 35px;
}



.corner-bottom:before {
    content: ' ';
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #4499D6;
    border-left: 1px solid #4499D6;
    border-bottom-left-radius: 10px;
    display: inline-block;
    position: absolute;
}

.corner-bottom.top-35:before {
    top: -40px;
}

.corner-bottom.arrow:after {
    bottom: -5px;
}

.corner-bottom.arrow.top-35:after {
    bottom: 35px;
}

.corner-top-bottom {
    border-top: 1px solid #4499D6;
    border-left: 1px solid #4499D6;
    border-bottom: 1px solid #4499D6;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: relative;
}

    .corner-top-bottom.top-35 {
        top: 40px;
    }

    .corner-top-bottom::before {
        content: " ";
        width: 0px;
        height: 0px;
        border-left: 10px;
        border-right: 0px;
        border-top: 5px;
        border-bottom: 5px;
        border-style: solid;
        border-color: transparent transparent transparent #4499D6;
        position: absolute;
        right: -1px;
        bottom: -5px;
    }

    .arrow::after, .corner-top-bottom::after {
        content: " ";
        width: 0px;
        height: 0px;
        border-left: 10px;
        border-right: 0px;
        border-top: 5px;
        border-bottom: 5px;
        border-style: solid;
        border-color: transparent transparent transparent #4499D6;
        position: absolute;
        right: -1px;
    }

    .corner-top-bottom::after {
        top: -5px;
    }


.archtable {
    border-spacing: 0px;
}


    .archtable td {
        position: relative;
    }

        .archtable td > div { 
            width:100%;
            height: 100%;
        }

    .archtable tr.item-row td {
        height: 80px;
    }

    .archtable tr:first-child,.archtable tr:last-child {
        height: 40px;
    }

    .archtable td.td-item {
        min-width: 140px;
    }

    .archtable td.td-line {
        min-width: 30px;
    }

    .archtable td.td-arrow {
        min-width: 50px;
    }

js主要用到jquery庫，css js 都寫的比較毛糙，基礎沒打好呀，歡迎大神指正~

PS:寫個博客好費時間，真是佩服那些大神寫一系列的文章，給你們點贊，寫了兩小時我快吐了~