1. PingCode智库首页
  2. 百科

html如何做成树状图

Edit1 • • 百科

html如何做成树状图

要在HTML中创建树状图，有几种方法可以使用：HTML列表、SVG（可缩放矢量图形）或Canvas。 首先，最简单的方法是使用HTML的嵌套列表来实现树状图。接下来，我们可以详细介绍如何使用CSS来美化列表，以及如何使用JavaScript来增强其交互性。HTML列表简单、易于实现、易于维护，这对于初学者来说是最好的选择。以下将详细介绍如何使用HTML列表来创建树状图。

一、使用HTML和CSS创建树状图

1、HTML列表基础

HTML提供了两种类型的列表：有序列表（<ol>）和无序列表（<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 Structure</title>


    <style>


        ul {


            list-style-type: none;


            padding-left: 20px;


            position: relative;


        }


        ul ul {


            margin-left: 20px;


        }


        ul li {


            margin: 0;


            padding: 0 12px;


            line-height: 20px;


            color: #369;


            font-weight: bold;


            position: relative;


        }


        ul li::before {


            content: '';


            position: absolute;


            top: 0;


            left: -12px;


            border-left: 1px solid #777;


            border-bottom: 1px solid #777;


            width: 12px;


            height: 20px;


        }


        ul li::after {


            content: '';


            position: absolute;


            top: 20px;


            left: -12px;


            border-left: 1px solid #777;


            border-top: 1px solid #777;


            width: 12px;


            height: 100%;


        }


        ul li:last-child::after {


            height: 20px;


        }


    </style>


</head>


<body>


    <ul>


        <li>Root


            <ul>


                <li>Branch 1


                    <ul>


                        <li>Leaf 1.1</li>


                        <li>Leaf 1.2</li>


                    </ul>


                </li>


                <li>Branch 2


                    <ul>


                        <li>Leaf 2.1</li>


                        <li>Leaf 2.2</li>


                    </ul>


                </li>


            </ul>


        </li>


    </ul>


</body>


</html>

2、CSS美化树状图

在上面的基础HTML中，我们可以通过CSS来美化树状图，使其看起来更像一个实际的树状结构。我们可以使用伪元素（::before和::after）来绘制连接线。

ul {


    list-style-type: none;


    padding-left: 20px;


    position: relative;


}


ul ul {


    margin-left: 20px;


}


ul li {


    margin: 0;


    padding: 0 12px;


    line-height: 20px;


    color: #369;


    font-weight: bold;


    position: relative;


}


ul li::before {


    content: '';


    position: absolute;


    top: 0;


    left: -12px;


    border-left: 1px solid #777;


    border-bottom: 1px solid #777;


    width: 12px;


    height: 20px;


}


ul li::after {


    content: '';


    position: absolute;


    top: 20px;


    left: -12px;


    border-left: 1px solid #777;


    border-top: 1px solid #777;


    width: 12px;


    height: 100%;


}


ul li:last-child::after {


    height: 20px;


}

二、使用JavaScript增强树状图

1、折叠和展开功能

我们可以使用JavaScript来添加折叠和展开功能，使树状图更具交互性。以下是一个简单的JavaScript实现示例。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Interactive Tree Structure</title>


    <style>


        ul {


            list-style-type: none;


            padding-left: 20px;


            position: relative;


        }


        ul ul {


            margin-left: 20px;


        }


        ul li {


            margin: 0;


            padding: 0 12px;


            line-height: 20px;


            color: #369;


            font-weight: bold;


            position: relative;


            cursor: pointer;


        }


        ul li::before {


            content: '';


            position: absolute;


            top: 0;


            left: -12px;


            border-left: 1px solid #777;


            border-bottom: 1px solid #777;


            width: 12px;


            height: 20px;


        }


        ul li::after {


            content: '';


            position: absolute;


            top: 20px;


            left: -12px;


            border-left: 1px solid #777;


            border-top: 1px solid #777;


            width: 12px;


            height: 100%;


        }


        ul li:last-child::after {


            height: 20px;


        }


    </style>


</head>


<body>


    <ul>


        <li>Root


            <ul>


                <li>Branch 1


                    <ul>


                        <li>Leaf 1.1</li>


                        <li>Leaf 1.2</li>


                    </ul>


                </li>


                <li>Branch 2


                    <ul>


                        <li>Leaf 2.1</li>


                        <li>Leaf 2.2</li>


                    </ul>


                </li>


            </ul>


        </li>


    </ul>


    <script>


        document.querySelectorAll('li').forEach(function(li) {


            li.addEventListener('click', function(e) {


                var children = li.querySelectorAll('ul');


                if (children.length > 0) {


                    children.forEach(function(ul) {


                        ul.style.display = (ul.style.display === 'none') ? 'block' : 'none';


                    });


                }


                e.stopPropagation();


            });


        });


    </script>


</body>


</html>

三、使用SVG创建树状图

1、基本SVG结构

SVG（可缩放矢量图形）是一种基于XML的图像格式，适用于在网页中绘制复杂的图形。SVG非常适合用来创建树状图，因为它支持矢量图形和交互。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>SVG Tree Structure</title>


    <style>


        .node {


            cursor: pointer;


        }


        .node circle {


            fill: #999;


            stroke: steelblue;


            stroke-width: 3px;


        }


        .node text {


            font: 12px sans-serif;


        }


        .link {


            fill: none;


            stroke: #555;


            stroke-width: 1.5px;


        }


    </style>


</head>


<body>


    <svg width="600" height="400"></svg>


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


    <script>


        var treeData = {


            "name": "Root",


            "children": [


                { 


                    "name": "Branch 1", 


                    "children": [


                        { "name": "Leaf 1.1" },


                        { "name": "Leaf 1.2" }


                    ]


                },


                { 


                    "name": "Branch 2", 


                    "children": [


                        { "name": "Leaf 2.1" },


                        { "name": "Leaf 2.2" }


                    ]


                }


            ]


        };


        var svg = d3.select("svg"),


            margin = {top: 20, right: 120, bottom: 20, left: 120},


            width = +svg.attr("width") - margin.right - margin.left,


            height = +svg.attr("height") - margin.top - margin.bottom,


            g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");


        var tree = d3.tree().size([height, width]);


        var root = d3.hierarchy(treeData);


        tree(root);


        var link = g.selectAll(".link")


            .data(root.descendants().slice(1))


            .enter().append("path")


            .attr("class", "link")


            .attr("d", function(d) {


                return "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;


            });


        var node = g.selectAll(".node")


            .data(root.descendants())


            .enter().append("g")


            .attr("class", "node")


            .attr("transform", function(d) {


                return "translate(" + d.y + "," + d.x + ")";


            });


        node.append("circle")


            .attr("r", 10);


        node.append("text")


            .attr("dy", ".35em")


            .attr("x", function(d) {


                return d.children ? -13 : 13;


            })


            .style("text-anchor", function(d) {


                return d.children ? "end" : "start";


            })


            .text(function(d) {


                return d.data.name;


            });


    </script>


</body>


</html>

2、SVG交互性

通过D3.js，我们可以进一步增强SVG树状图的交互性，例如添加折叠和展开功能。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Interactive SVG Tree Structure</title>


    <style>


        .node {


            cursor: pointer;


        }


        .node circle {


            fill: #999;


            stroke: steelblue;


            stroke-width: 3px;


        }


        .node text {


            font: 12px sans-serif;


        }


        .link {


            fill: none;


            stroke: #555;


            stroke-width: 1.5px;


        }


    </style>


</head>


<body>


    <svg width="600" height="400"></svg>


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


    <script>


        var treeData = {


            "name": "Root",


            "children": [


                { 


                    "name": "Branch 1", 


                    "children": [


                        { "name": "Leaf 1.1" },


                        { "name": "Leaf 1.2" }


                    ]


                },


                { 


                    "name": "Branch 2", 


                    "children": [


                        { "name": "Leaf 2.1" },


                        { "name": "Leaf 2.2" }


                    ]


                }


            ]


        };


        var svg = d3.select("svg"),


            margin = {top: 20, right: 120, bottom: 20, left: 120},


            width = +svg.attr("width") - margin.right - margin.left,


            height = +svg.attr("height") - margin.top - margin.bottom,


            g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");


        var tree = d3.tree().size([height, width]);


        var root = d3.hierarchy(treeData, function(d) { return d.children; });


        root.x0 = height / 2;


        root.y0 = 0;


        function collapse(d) {


            if (d.children) {


                d._children = d.children;


                d._children.forEach(collapse);


                d.children = null;


            }


        }


        root.children.forEach(collapse);


        update(root);


        function update(source) {


            var treeData = tree(root);


            var nodes = treeData.descendants(),


                links = treeData.descendants().slice(1);


            nodes.forEach(function(d){ d.y = d.depth * 180; });


            var node = g.selectAll('g.node')


                .data(nodes, function(d) { return d.id || (d.id = ++i); });


            var nodeEnter = node.enter().append('g')


                .attr('class', 'node')


                .attr("transform", function(d) {


                    return "translate(" + source.y0 + "," + source.x0 + ")";


                })


                .on('click', click);


            nodeEnter.append('circle')


                .attr('class', 'node')


                .attr('r', 1e-6)


                .style("fill", function(d) {


                    return d._children ? "lightsteelblue" : "#fff";


                });


            nodeEnter.append('text')


                .attr("dy", ".35em")


                .attr("x", function(d) {


                    return d.children || d._children ? -13 : 13;


                })


                .attr("text-anchor", function(d) {


                    return d.children || d._children ? "end" : "start";


                })


                .text(function(d) { return d.data.name; });


            var nodeUpdate = nodeEnter.merge(node);


            nodeUpdate.transition()


                .duration(duration)


                .attr("transform", function(d) { 


                    return "translate(" + d.y + "," + d.x + ")";


                });


            nodeUpdate.select('circle.node')


                .attr('r', 10)


                .style("fill", function(d) {


                    return d._children ? "lightsteelblue" : "#fff";


                })


                .attr('cursor', 'pointer');


            var nodeExit = node.exit().transition()


                .duration(duration)


                .attr("transform", function(d) {


                    return "translate(" + source.y + "," + source.x + ")";


                })


                .remove();


            nodeExit.select('circle')


                .attr('r', 1e-6);


            nodeExit.select('text')


                .style('fill-opacity', 1e-6);


            var link = g.selectAll('path.link')


                .data(links, function(d) { return d.id; });


            var linkEnter = link.enter().insert('path', "g")


                .attr("class", "link")


                .attr('d', function(d){


                    var o = {x: source.x0, y: source.y0}


                    return diagonal(o, o)


                });


            var linkUpdate = linkEnter.merge(link);


            linkUpdate.transition()


                .duration(duration)


                .attr('d', function(d){ return diagonal(d, d.parent) });


            var linkExit = link.exit().transition()


                .duration(duration)


                .attr('d', function(d) {


                    var o = {x: source.x, y: source.y}


                    return diagonal(o, o)


                })


                .remove();


            nodes.forEach(function(d){


                d.x0 = d.x;


                d.y0 = d.y;


            });


            function diagonal(s, d) {


                return `M ${s.y} ${s.x}


                        C ${(s.y + d.y) / 2} ${s.x},


                          ${(s.y + d.y) / 2} ${d.x},


                          ${d.y} ${d.x}`;


            }


            function click(d) {


                if (d.children) {


                    d._children = d.children;


                    d.children = null;


                } else {


                    d.children = d._children;


                    d._children = null;


                }


                update(d);


            }


        }


    </script>


</body>


</html>

四、总结和高级应用

1、总结

HTML、CSS和JavaScript为创建树状图提供了基本的工具和技术。通过HTML列表，我们可以快速创建一个简单的树状图，通过CSS美化，使其看起来更专业。使用JavaScript，我们可以增强其交互性，例如添加折叠和展开功能。通过SVG，我们可以创建更复杂、可缩放的树状图，并使用D3.js进一步增强其交互性。

2、高级应用

在实际应用中，您可能需要使用更加复杂和功能丰富的工具和库，如D3.js、Tree.js、或其他可视化库。这些工具可以帮助您创建更加复杂和交互性更强的树状图。此外，您还可以将这些树状图集成到项目管理系统中，如研发项目管理系统PingCode和通用项目协作软件Worktile，以实现更高效的项目管理和团队协作。

通过以上的介绍，您应该能够掌握如何在HTML中创建树状图，并根据需要选择适合的工具和技术进行实现。

相关问答FAQs：

1. 如何使用HTML创建树状图？
使用HTML可以通过使用嵌套的<ul>和<li>标签来创建树状图。每个<li>标签可以包含子级<ul>标签，以便形成层次结构。使用CSS样式可以调整树状图的外观。

2. 如何在HTML中添加样式来美化树状图？
您可以使用CSS样式为树状图添加样式，例如更改节点的颜色、大小和形状，调整节点之间的间距，以及添加动画效果。通过为不同级别的节点应用不同的CSS类，您可以创建具有不同样式的树状图。

3. 如何在HTML树状图中添加交互功能？
要为HTML树状图添加交互功能，您可以使用JavaScript。例如，您可以为每个节点添加点击事件，以展开或折叠子级节点。您还可以通过将节点与后端数据连接，实现动态加载节点的功能，以便树状图可以从后端获取数据并显示。

文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3009027

赞 (0)
Edit1Edit1
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部