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

Stacey-TL

于 2024-07-09 08:57:40 发布

阅读量304

点赞数 12

文章标签：前端 javascript uni-app html vue.js

本文链接：https://blog.csdn.net/qq_38687592/article/details/140285276

版权

   <!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": "程十"
                                                           },

最低0.47元/天解锁文章

Stacey-TL

关注

12
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
d3tree树控件，点击动态加载，默认展开三层

// 5 给节点添加文本设置文本样式位置 nodeEnter.append("text") .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) .attr("dy", ".35em")
复制链接

扫一扫