d3tree树控件,点击动态加载,默认展开三层

    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>tree</title>
    <style>
        .node {
            cursor: pointer;
        }

        .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 1.5px;
        }

        .node text {
            font: 10px sans-serif;
        }

        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 1.5px;
        }

        .tree {
            width: 800px;
            height: 800px;
            margin: 0 auto;
            background: #E0E0E0;
        }

        .tree svg {
            width: 100%;
            height: 100%;
        }
    </style>
    <body>
        <div class="tree" id="tree"></div>
        <script src="./js/d3.v3.min.js"></script>
        <script>
            var json = [{
                "name": "张三",
                "parent": "null",
                "children": [{
                        "name": "李四",
                        "parent": "张三",
                        "children": [{
                                "name": "王五",
                                "parent": "李四",
                                "children": [{
                                        "name": "程六",
                                        "parent": "王五"
                                    },
                                    {
                                        "name": "王八",
                                        "parent": "王五"
                                    },
                                    {
                                        "name": "王七",
                                        "parent": "王五"
                                    },
                                    {
                                        "name": "王九",
                                        "parent": "王五",
                                        "children": [{
                                                "name": "王十",
                                                "parent": "王五"
                                            },
                                            {
                                                "name": "王十一",
                                                "parent": "王五"
                                            },
                                            {
                                                "name": "王十二",
                                                "parent": "王五"
                                            },
                                            {
                                                "name": "王十三",
                                                "parent": "王五"
                                            },
                                            {
                                                "name": "王十四",
                                                "parent": "王五"
                                            },
                                            {
                                                "name": "程五",
                                                "parent": "王五",
                                                "children": [{
                                                        "name": "程六",
                                                        "parent": "程五"
                                                    },
                                                    {
                                                        "name": "程七",
                                                        "parent": "程五"
                                                    },
                                                    {
                                                        "name": "程八",
                                                        "parent": "程五"
                                                    },
                                                    {
                                                        "name": "小张",
                                                        "parent": "小红"
                                                    },
                                                    {
                                                        "name": "小王",
                                                        "parent": "小红"
                                                    },
                                                    {
                                                        "name": "小程",
                                                        "parent": "小红"
                                                    },
                                                    {
                                                        "name": "程九",
                                                        "parent": "程五"
                                                    },
                                                    {
                                                        "name": "程十",
                                                        "parent": "程五",
                                                        "children": [{
                                                                "name": "程十一",
                                                                "parent": "程十"
                                                            },
                                                            {
                                                                "name": "程十二",
                                                                "parent": "程十"
                                                            },
                                         

相关推荐

  1. d3tree动态默认展开

    2024-07-10 22:12:02       6 阅读
  2. 天地图WMS图服务,获取图信息

    2024-07-10 22:12:02       23 阅读

最近更新

  1. 人工智能:改变我们日常生活的无形力量

    2024-07-10 22:12:02       0 阅读
  2. F - Palindromic Expression (abc363)

    2024-07-10 22:12:02       0 阅读
  3. iOS应用冷启动优化,可以做哪些事情

    2024-07-10 22:12:02       0 阅读
  4. MySQL学习之事务,锁机制

    2024-07-10 22:12:02       0 阅读
  5. 神经架构搜索:目标检测的未来

    2024-07-10 22:12:02       0 阅读
  6. Spring 系列

    2024-07-10 22:12:02       0 阅读
  7. 什么是CRISPR/Cas9?

    2024-07-10 22:12:02       0 阅读

热门阅读

  1. ontape备份异机还原的样例

    2024-07-10 22:12:02       6 阅读
  2. [PaddlePaddle飞桨] PaddleSpeech语言小模型部署

    2024-07-10 22:12:02       6 阅读
  3. vivado DQS_BIAS

    2024-07-10 22:12:02       6 阅读
  4. PHP框架详解-symfony框架

    2024-07-10 22:12:02       7 阅读
  5. 深入理解UTF-8 Encoding在C#中的应用与异常处理

    2024-07-10 22:12:02       7 阅读
  6. Linux 常用命令 - mkdir【创建新目录】

    2024-07-10 22:12:02       7 阅读
  7. stm32实现IIC读写

    2024-07-10 22:12:02       5 阅读
  8. 中小企业和数智化的距离,只差一块华为IdeaHub

    2024-07-10 22:12:02       8 阅读
  9. C# —— Directory类

    2024-07-10 22:12:02       5 阅读