使用Tree.js實現網頁中的分層結構展示

一、什麼是Tree.js

Tree.js是一個輕量級的JavaScript庫，專門用於創建基於樹形結構的互動式圖表。它允許用戶以交互方式深入研究樹形結構並對其進行操作。Tree.js的代碼風格非常輕量，所以它可以很容易地與Web應用程序和單頁面應用程序集成。

在使用Tree.js之前，我們需要引入它的JavaScript文件。需要注意的是，Tree.js依賴於D3.js，所以我們需要同時引入D3.js庫。

    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/treejs/2.8.0/tree.min.js"></script>

二、如何使用Tree.js

在使用Tree.js時，我們需要定義一個數據源，用於表示樹狀結構的數據，並將其綁定到Tree.js實例上。同時，我們還需要定義一個容器，用於展示生成的樹狀圖。下面是一個簡單的Tree.js實現例子：

    <div id="tree-container"></div>

    <script>
        var treeData = [
          {
            "name": "A",
            "children": [
              {
                "name": "B"
              },
              {
                "name": "C"
              }
            ]
          }
        ];

        var tree = new Tree("#tree-container", {
            data: treeData
        });
    </script>

在上述例子中，我們通過treeData變數定義了一棵樹狀結構的數據，其中根節點為「A」，其下有兩個子節點「B」和「C」。

接下來，我們通過new Tree(…)語句創建一個Tree.js實例，並將其綁定到id為「tree-container」的容器上。這個語句的第二個參數是一個選項對象，用於配置Tree.js實例。在這個例子中，我們只定義了一個數據屬性，即使用我們剛剛定義的treeData變數作為數據源。

如果我們打開頁面，就會看到一個簡單的樹狀圖，其中根節點為「A」，下面有兩個子節點「B」和「C」：

三、如何自定義Tree.js

除了簡單地顯示樹狀結構之外，我們還可以通過一些選項來自定義Tree.js的行為和外觀。

1. 配置選項

上面的例子中我們已經用過了一個data選項，這個選項用於指定Tree.js的數據源。除了data以外，還有一些常用的選項：

collapsed: Boolean，用於指定節點是否默認摺疊。
orientation: String，用於指定樹的方向，可以是”vertical”或”horizontal”。
zoomable: Boolean，用於指定是否可縮放。
pannable: Boolean，用於指定是否可平移。
onNodeClick: Function，用於指定單擊節點時的回調函數。
onNodeDblClick: Function，用於指定雙擊節點時的回調函數。
onNodeMouseMove: Function，用於指定滑鼠移動到節點時的回調函數。
onNodeMouseOut: Function，用於指定滑鼠從節點移開時的回調函數。
onNodeMouseDown: Function，用於指定滑鼠按下節點時的回調函數。
onNodeMouseUp: Function，用於指定滑鼠鬆開節點時的回調函數。
onZoom: Function，用於指定縮放時的回調函數。
onPan: Function，用於指定平移時的回調函數。

2. 樣式選項

我們也可以自定義樹狀圖的樣式，Tree.js提供了一些樣式選項來實現這一功能。我們可以在上面的例子中添加一個option選項來覆蓋默認的樣式：

    var tree = new Tree("#tree-container", {
        data: treeData,
        options: {
            nodeWidth: 100,
            nodeHeight: 50,
            nodeObjectRadius: 4,
            nodeBackgroundColor: "#eee",
            nodeBorderColor: "#999",
            nodeTextColor: "#333",
            linkLineColor: "#ccc",
            linkLineWidth: 2
        }
    });

在這個例子中，我們用options選項來定義了一些節點和連線的樣式選項，包括nodeWidth、nodeHeight、nodeObjectRadius、nodeBackgroundColor、nodeBorderColor、nodeTextColor、linkLineColor和linkLineWidth。

四、完整代碼實例

最後，我們來看一個完整的Tree.js實例，它展示了一棵文件系統樹狀結構，並展開了若干節點：

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Tree.js Example</title>
        <style>
        #tree-container {
            height: 600px;
        }
        </style>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/treejs/2.8.0/tree.min.js"></script>
    </head>
    <body>
        <h1>Tree.js Example</h1>

        <div id="tree-container"></div>

        <script>
            var treeData = {
                "name": "root",
                "attributes": {
                    "type": "directory"
                },
                "children": [
                    {
                        "name": "dev",
                        "attributes": {
                            "type": "directory"
                        },
                        "children": [
                            {
                                "name": "hda1",
                                "attributes": {
                                    "type": "directory"
                                },
                                "children": []
                            },
                            {
                                "name": "sda1",
                                "attributes": {
                                    "type": "directory"
                                },
                                "children": []
                            }
                        ]
                    },
                    {
                        "name": "etc",
                        "attributes": {
                            "type": "directory"
                        },
                        "children": [
                            {
                                "name": "apache",
                                "attributes": {
                                    "type": "directory"
                                },
                                "children": []
                            },
                            {
                                "name": "nginx",
                                "attributes": {
                                    "type": "directory"
                                },
                                "children": []
                            }
                        ]
                    }
                ]
            };

            var tree = new Tree("#tree-container", {
                data: treeData,
                options: {
                    collapsed: false,
                    nodeWidth: 120,
                    nodeHeight: 50,
                    nodeObjectRadius: 4,
                    nodeBackgroundColor: "#fff",
                    nodeBorderColor: "#999",
                    nodeTextColor: "#333",
                    linkLineColor: "#ccc",
                    linkLineWidth: 2
                }
            });
        </script>
    </body>
    </html>

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/302756.html