js 树状图怎么做

JS 树状图怎么做

使用JavaScript创建树状图的方法有很多，其中主要包括：使用HTML和CSS手动绘制、使用D3.js等JavaScript库、使用Canvas API。这些方法各有优缺点，具体选择应根据项目需求和个人技能水平来决定。本文将详细介绍这几种方法，并提供相应的代码示例和操作步骤。

一、使用HTML和CSS手动绘制

这种方法适合简单的树状图，主要使用HTML的嵌套结构和CSS的样式来实现。优点是易于理解和实现，缺点是无法处理复杂的数据结构和交互功能。

1.1 创建基本结构

首先，定义一个HTML结构，使用<ul>和<li>标签嵌套表示树节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tree Diagram</title>
    <style>
        .tree ul {
            padding-top: 20px; 
            position: relative;
            transition: all 0.5s;
        }
        .tree li {
            float: left; 
            text-align: center;
            list-style-type: none;
            position: relative; 
            padding: 20px 5px 0 5px;
            transition: all 0.5s;
        }
        .tree li::before, .tree li::after {
            content: '';
            position: absolute; 
            top: 0; 
            right: 50%;
            border-top: 1px solid #ccc; 
            width: 50%; 
            height: 20px;
        }
        .tree li::after {
            right: auto; 
            left: 50%; 
            border-left: 1px solid #ccc;
        }
        .tree li:only-child::after, .tree li:only-child::before {
            display: none;
        }
        .tree li:only-child { 
            padding-top: 0;
        }
        .tree li:first-child::before, .tree li:last-child::after {
            border: 0 none;
        }
        .tree li:last-child::before {
            border-right: 1px solid #ccc;
            border-radius: 0 5px 0 0;
        }
        .tree li:first-child::after {
            border-radius: 5px 0 0 0;
        }
        .tree ul ul::before {
            content: '';
            position: absolute; 
            top: 0; 
            left: 50%;
            border-left: 1px solid #ccc;
            width: 0; 
            height: 20px;
        }
        .tree li a {
            border: 1px solid #ccc;
            padding: 5px 10px;
            text-decoration: none;
            color: #666;
            font-family: arial, verdana, tahoma;
            font-size: 11px;
            display: inline-block;
            border-radius: 5px;
            transition: all 0.5s;
        }
        .tree li a:hover, .tree li a:hover+ul li a {
            background: #c8e4f8; 
            color: #000; 
            border: 1px solid #94a0b4;
        }
        .tree li a:hover+ul li::after, 
        .tree li a:hover+ul li::before, 
        .tree li a:hover+ul::before, 
        .tree li a:hover+ul ul::before {
            border-color:  #94a0b4;
        }
    </style>
</head>
<body>
    <div class="tree">
        <ul>
            <li>
                <a href="#">Parent</a>
                <ul>
                    <li>
                        <a href="#">Child</a>
                        <ul>
                            <li><a href="#">Grandchild</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Child</a>
                        <ul>
                            <li><a href="#">Grandchild</a></li>
                            <li><a href="#">Grandchild</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

1.2 样式调整

通过CSS调整样式，使树状图更美观。可以自定义颜色、边框、间距等属性。

.tree ul {
    padding-top: 20px; 
    position: relative;
    transition: all 0.5s;
}
.tree li {
    float: left; 
    text-align: center;
    list-style-type: none;
    position: relative; 
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
}
.tree li::before, .tree li::after {
    content: '';
    position: absolute; 
    top: 0; 
    right: 50%;
    border-top: 1px solid #ccc; 
    width: 50%; 
    height: 20px;
}
.tree li::after {
    right: auto; 
    left: 50%; 
    border-left: 1px solid #ccc;
}
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}
.tree li:only-child { 
    padding-top: 0;
}
.tree li:first-child::before, .tree li:last-child::after {
    border: 0 none;
}
.tree li:last-child::before {
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
    border-radius: 5px 0 0 0;
}
.tree ul ul::before {
    content: '';
    position: absolute; 
    top: 0; 
    left: 50%;
    border-left: 1px solid #ccc;
    width: 0; 
    height: 20px;
}
.tree li a {
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;
    border-radius: 5px;
    transition: all 0.5s;
}
.tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8; 
    color: #000; 
    border: 1px solid #94a0b4;
}
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before {
    border-color:  #94a0b4;
}

二、使用D3.js库

D3.js 是一个功能强大的JavaScript库，专门用于创建复杂的数据可视化。使用D3.js创建树状图可以处理复杂的数据结构，并添加丰富的交互功能。

2.1 安装D3.js

可以通过CDN引入D3.js库。

<script src="https://d3js.org/d3.v6.min.js"></script>

2.2 创建基本结构

首先，定义一个HTML结构，创建一个用于绘制树状图的<svg>标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tree Diagram with D3.js</title>
    <style>
        .node circle {
            fill: #999;
        }
        .node text {
            font: 12px sans-serif;
        }
        .link {
            fill: none;
            stroke: #555;
            stroke-width: 1.5px;
        }
    </style>
</head>
<body>
    <svg width="960" height="500"></svg>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <script>
        const data = {
            "name": "Parent",
            "children": [
                {
                    "name": "Child 1",
                    "children": [
                        { "name": "Grandchild 1" },
                        { "name": "Grandchild 2" }
                    ]
                },
                { "name": "Child 2" }
            ]
        };
        const width = 960;
        const height = 500;
        const svg = d3.select("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(40,0)");
        const tree = d3.tree()
            .size([height, width - 160]);
        const root = d3.hierarchy(data);
        tree(root);
        const link = svg.selectAll(".link")
            .data(root.descendants().slice(1))
            .enter().append("path")
            .attr("class", "link")
            .attr("d", d => `
                M${d.y},${d.x}
                C${(d.y + d.parent.y) / 2},${d.x}
                 ${(d.y + d.parent.y) / 2},${d.parent.x}
                 ${d.parent.y},${d.parent.x}
            `);
        const node = svg.selectAll(".node")
            .data(root.descendants())
            .enter().append("g")
            .attr("class", d => "node" + (d.children ? " node--internal" : " node--leaf"))
            .attr("transform", d => `translate(${d.y},${d.x})`);
        node.append("circle")
            .attr("r", 10);
        node.append("text")
            .attr("dy", 3)
            .attr("x", d => d.children ? -12 : 12)
            .style("text-anchor", d => d.children ? "end" : "start")
            .text(d => d.data.name);
    </script>
</body>
</html>

三、使用Canvas API

使用Canvas API可以绘制高性能的树状图，适合需要处理大量节点的场景。Canvas的优点是性能好，缺点是需要手动绘制每个节点和连线。

3.1 创建基本结构

首先，定义一个HTML结构，创建一个用于绘制树状图的<canvas>标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tree Diagram with Canvas</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="treeCanvas" width="960" height="500"></canvas>
    <script>
        const canvas = document.getElementById('treeCanvas');
        const ctx = canvas.getContext('2d');
        const data = {
            name: "Parent",
            children: [
                {
                    name: "Child 1",
                    children: [
                        { name: "Grandchild 1" },
                        { name: "Grandchild 2" }
                    ]
                },
                { name: "Child 2" }
            ]
        };
        function drawTree(ctx, node, x, y, offset) {
            if (!node) return;
            ctx.beginPath();
            ctx.arc(x, y, 20, 0, 2 * Math.PI);
            ctx.fillText(node.name, x - 10, y + 5);
            ctx.stroke();
            if (node.children) {
                const step = offset / node.children.length;
                node.children.forEach((child, i) => {
                    drawTree(ctx, child, x + offset, y + (i - (node.children.length - 1) / 2) * step, offset / 2);
                    ctx.beginPath();
                    ctx.moveTo(x, y);
                    ctx.lineTo(x + offset, y + (i - (node.children.length - 1) / 2) * step);
                    ctx.stroke();
                });
            }
        }
        ctx.font = '14px Arial';
        ctx.textAlign = 'center';
        drawTree(ctx, data, 100, canvas.height / 2, 200);
    </script>
</body>
</html>

四、选择合适的项目管理系统

在开发过程中，合适的项目管理系统可以大大提高效率。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来管理项目。PingCode专注于研发项目管理，具备丰富的研发管理功能；Worktile则适用于各种类型的项目协作，易于上手且功能强大。

总结

本文详细介绍了使用HTML和CSS手动绘制、使用D3.js库、使用Canvas API三种方法来创建JS树状图。每种方法都有其优缺点，选择哪种方法应根据具体的项目需求和个人技能水平来决定。希望这些内容能帮助你更好地理解和实现JS树状图的制作。如果你需要处理复杂的数据结构和交互功能，推荐使用D3.js库；如果你需要高性能绘图，推荐使用Canvas API；如果你只是需要一个简单的树状图，使用HTML和CSS手动绘制即可。