d3.tree树图

最新推荐文章于 2024-05-31 16:38:57 发布
最新推荐文章于 2024-05-31 16:38:57 发布
阅读量5.6k 收藏 13
点赞数 5
分类专栏： js 文章标签： 树
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songqiang2011/article/details/86521194
版权

<!DOCTYPE html>  
<meta charset="utf-8">  
<title>tree</title>
<script src="http://apps.bdimg.com/libs/d3/3.4.8/d3.min.js"></script>
<script src="js/d3.common.js"></script>  
<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>

<script>
var json = [  
  {  
  "name": "张三",  
  "parent": "null", 
  "image":"mengli.png",
  "children": [  
    {  
      "name": "李四",
      "image":"mengli.png",
      "parent": "张三",  
      "children": [  
        {  
          "name": "王五",  
          "parent": "李四",
          "children": [
          {"name": "程六","parent": "王五","image":"chanyou.png"},
          {"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": "小红" },
                      {"name": "小张","parent": "小红" },
                      {"name": "小王","parent": "小红" },
                      {"name": "小程","parent": "小红" },
                      {"name": "小陈","parent": "小红" },
                      {"name": "小明","parent": "小红" },
                      {"name": "小张","parent": "小红" },
                      {"name": "小王","parent": "小红" },
                      {"name": "小程","parent": "小红" },
                      {"name": "小陈","parent": "小红" },
                      {"name": "小明","parent": "小红" },
                      {"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": "小红" },
                              {"name": "小张","parent": "小红" },
                              {"name": "小王","parent": "小红" },
                              {"name": "小程","parent": "小红" },
                              {"name": "小陈","parent": "小红" },
                              {"name": "小明","parent": "小红" },
                              {"name": "小张","parent": "小红" },
                              {"name": "小王","parent": "小红" },
                              {"name": "小程","parent": "小红" },
                              {"name": "小陈","parent": "小红" },
                              {"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": "小红" },
              {"name": "小王","parent": "小红" },
              {"name": "小程","parent": "小红" },
              {"name": "小陈","parent": "小红" },
              {"name": "小明","parent": "小红" },
              {"name": "小张","parent": "小红" },
              {"name": "小王","parent": "小红" },
              {"name": "小程","parent": "小红" },
              {"name": "小陈","parent": "小红" },
              {"name": "小张","parent": "小红" },
              {"name": "小王","parent": "小红" },
              {"name": "小程","parent": "小红" },
              {"name": "小陈","parent": "小红" },
              {"name": "小明","parent": "小红" },
              {"name": "小张","parent": "小红" },
              {"name": "小王","parent": "小红" },
              {"name": "小程","parent": "小红" },
              {"name": "小陈","parent": "小红" },
              {"name": "小明","parent": "小红" },
              {"name": "小张","parent": "小红" },
              {"name": "小王","parent": "小红" },
              {"name": "小程","parent": "小红" },
              {"name": "小陈","parent": "小红" },
              {"name": "小明","parent": "小红" },
              {"name": "小张","parent": "小红" },
              {"name": "小王","parent": "小红" },
              {"name": "小程","parent": "小红" },
              {"name": "小陈","parent": "小红" },
              {"name": "小明","parent": "小红" },
              {"name": "小张","parent": "小红" },
              {"name": "小王","parent": "小红" },
              {"name": "小程","parent": "小红" },
              {"name": "小陈","parent": "小红" },
              {"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": "小红" },
          {"name": "小程","parent": "小红" },
          {"name": "小陈","parent": "小红" },
          {"name": "小明","parent": "小红" },
          {"name": "小张","parent": "小红" },
          {"name": "小王","parent": "小红" },
          {"name": "小程","parent": "小红" },
          {"name": "小陈","parent": "小红" },
          {"name": "小明","parent": "小红" },
          {"name": "小张","parent": "小红" },
          {"name": "小王","parent": "小红" },
          {"name": "小程","parent": "小红" },
          {"name": "小陈","parent": "小红" },
          {"name": "小明","parent": "小红" },
          {"name": "小张","parent": "小红" },
          {"name": "小王","parent": "小红" },
          {"name": "小程","parent": "小红" },
          {"name": "小陈","parent": "小红" },
          {"name": "小明","parent": "小红" },
          {"name": "小张","parent": "小红" },
          {"name": "小王","parent": "小红" },
          {"name": "小程","parent": "小红" },
          {"name": "小陈","parent": "小红" },
          
      ]
    }  
  ]  
}  
];  
window.οnlοad=function(){ 
    var width = document.getElementById("tree").offsetWidth;
    var height = document.getElementById("tree").offsetHeight;
    treeInit(json,width,height);
}
</script>
<body>
    <div class="tree" id="tree"></div> 
</body>
</html>

d3.common.js

function treeInit(json,width,height){
  
    var margin = [20, 120, 20, 120];     
    var i = 0,  
        duration = 750,  
        root;  
      
    var tree = d3.layout.tree()  
        .size([height, width]);  
      
    var diagonal = d3.svg.diagonal()  
        .projection(function(d) { return [d.y, d.x]; });  
      
    var zoom = d3.behavior.zoom().scaleExtent([0.1, 100]).on("zoom", zoomed);//添加放大缩小事件
      
    var svg = d3.select("body").select("#tree").append("svg")
    .call(zoom)//给svg绑定zoom事件
      .append("g")  
      .call(zoom)//给g绑定zoom事件
      .append("g")
        .attr("transform", "translate(" + margin[3] + "," + margin[0] + ")");  

      
      root = json[0];
      if(typeof(root) == "undefined"){
          root = json;
      }
      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 zoomed() {
        svg.attr("transform",
            "translate(" + zoom.translate() + ")" +
            "scale(" + zoom.scale() + ")"
        );
    }
      
    function update(source) {  
      
      // Compute the new tree layout.  
      var nodes = tree.nodes(root).reverse(),  
          links = tree.links(nodes);  
      
      // Normalize for fixed-depth.  
      nodes.forEach(function(d) { d.y = d.depth * 180; });  
      
      // Update the nodes…  
      var node = svg.selectAll("g.node")  
          .data(nodes, function(d) { return d.id || (d.id = ++i); });  

      // Enter any new nodes at the parent's previous position.  
      var nodeEnter = node.enter().append("g")  
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })  
          .on("click", click); 

    var img_w = 30;//图片宽高
    var img_h = 30;
    nodeEnter.append("image")
            .attr("width",img_w)
            .attr("height",img_h)
            .attr("y", function(d) { return  -(img_h*0.5); })  
            .attr("xlink:href",function(d){
                return d.image;
            });  
      nodeEnter.append("circle")  
          .attr("r", 1e-6)  
          .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });  
      
      nodeEnter.append("text")
          .attr("x", function(d) { return d.children || d._children ? -10 : 10; })  
          .attr("dy", ".35em")  
          .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })  
          .text(function(d) { return d.name; })  
          .style("fill-opacity", 1e-6);  
      
      var nodeUpdate = node.transition()  
          .duration(duration)  
          .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });  
      
      nodeUpdate.select("circle")  
          .attr("r", 4.5)  
          .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });  
      
      nodeUpdate.select("text")  
          .style("fill-opacity", 1);  
      
      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 = svg.selectAll("path.link")  
          .data(links, function(d) { return d.target.id; });  
      
      link.enter().insert("path", "g")  
          .attr("class", "link")  
          .attr("d", function(d) {  
            var o = {x: source.x0, y: source.y0};  
            return diagonal({source: o, target: o});  
          });  
        
      link.transition()  
          .duration(duration)  
          .attr("d", diagonal);  
        
      link.exit().transition()  
          .duration(duration)  
          .attr("d", function(d) {  
            var o = {x: source.x, y: source.y};  
            return diagonal({source: o, target: o});  
          })  
          .remove();  
       
      nodes.forEach(function(d) {  
        d.x0 = d.x;  
        d.y0 = d.y;  
      });
    
    }
    function click(d) {  
      if (d.children) {  
        d._children = d.children;  
        d.children = null;  
      } else {  
        d.children = d._children;  
        d._children = null;  
      }  
      update(d);  
    }
}
      

 

像忘了谁sq
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用vue.js+d3生成树以及遇到的坑
qq_37842366的博客
07-22 3464
vue项目中使用d3实现树结构1. vue.js安装vue.js2. d3安装d3vue中引入3. 代码部分（1）生成树实现（2）如果想要树的连接线是直线（3）处理文字溢出，溢出部分显示...a. 坑1（4）鼠标点击提示框显示完整标题（5）全部样式a. 坑2（6）HTML部分坑34. 结果展示5. 完整代码结语 1. vue.js 安装vue.js 最新稳定版本 $ npm install vue...
d3.js实现树形结构过渡展开、折叠
小陈的博客
09-23 1378
}整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取) 可以看到上面的图片则为新构建树形结构。
d3 tree 实现双向动画树总结
japlus的博客
03-02 1906
使用d3.js 实现双向tree，并实现节点展开收起动画。使用svg 绘制。
D3最新版本实现组织型tree结构，包含拖拽、缩放、平移、折叠、异步加载节点自定义渲染等功能
qq_44621394的博客
08-04 1614
import { PureComponent } from 'react' import { D3 } from "@weapp/ui" let d3: any = null; //辅助函数: 递归获取tree的节点数量 function getCount(parent: any) { var count = 0; if (Array.isArray(parent.children)) { count += parent.children.length; parent.chil..
dagre-d3画树形拓扑图(包含分组)、流程图
最新发布
qq_40588529的博客
05-31 1017
使用.translateExtent指定[[x0, y0], [x1, y1]]限制用户平移的范围。// 流程图从下向上显示，默认'TB'，可取值'TB'、'BT'、'LR'、'RL'// ranker: "network-simplex",//连线算法。// ranksep: 100, // 层与层之间的间距。// new dagreD3.render()创建渲染器。// compound:true为分组必须配置！// nodesep: 70, // 节点之间间距。// ②创建 graph 对象。
D3 Tree
weixin_39967005的博客
04-13 828
D3生成树
d3.js-TreeDiagram:运用d3.js框架制作的树图
05-19
d3.js-TreeDiagram运用d3.js框架制作的树图效果图使用方法:d3tree(第1个参数为id，第2个参数为高度，第3个参数为宽度，第4个参数为树图的第1列，第5个参数为树图的第2列，其他参数数组中第1个数为父亲节点，如第6个...
vue-tree-chart:由D3.js支持的使用Canvas和Svg的灵活树形图
05-01
|演示页面演示Gif使用技术画布版本结合使用D3.js和Canvas可以更有效地绘制organizationChart。 使用unique-color方式识别Canvas中的鼠标单击事件（您可以参考以查看详细信息）SVG版本使用D3计算节点和链接位置使用...
java统计代码行数生成json文件+D3.js绘制树图（矩形分区图、圆状集群图、矩阵树图）+实验报告
01-02
3. 矩阵树图（Matrix Tree）：这种图以表格形式展示节点之间的关系，每个节点作为一个单元格，行和列代表树的层级，单元格的颜色或大小表示代码行数。 在实现这些可视化时，需要理解D3.js的核心概念，如数据绑定、...
d3.js关系图谱示例
04-28
在d3中，可以使用tree布局或cluster布局来创建树图。在这个示例中，节点可以展开和收缩，便于用户探索层次结构。 4. **方向控制**：d3.js允许开发者自定义树图的布局方向，如水平、垂直或对角线。这通过设置相应的...
react-d3-treemap:基于使用React构建的d3.treemap的树图
03-20
react-d3-treemap 基于 和构建的TreeMap组件。 演示 特征 为绘画SVG做出React D3用于进行数学计算 安装 在React项目中使用react-d3-treemap的步骤 1.从NPM安装 npm install --save react-d3-treemap 2.导入并在您...
vued3treeVUE实现自定义节点的树结构
08-09
vued3treeVUE实现自定义节点的树结构
D3树图数据结构例子
01-12
D3树图数据结构例子，用于理解treemap layout
D3实现树状图(vue+v5)
The One Who's at the Front
10-24 4507
树状图 树状图用于表示层级、上下级、包含与被包含关系 新知识 d3.hierarchy() 层级布局，需要和tree生成器一起使用，来得到绘制树所需要的节点数据和边数据。 d3.hierarchy().sum() 后序遍历，官方API的解释如下： d3.tree() 创建一个树状图生成器 d3.tree().size() 定义树的大小 d3.tree().separation(...
svg 树状图_d3 树状布局tree
weixin_39683241的博客
02-11 906
树状布局Tree-Layout简介显而易见，树状布局就是我们通常所理解的数据结构中的树，由一个根节点向外展开，与前面力导向图的数据结构模型其实是一致的，只是展示形式略有差别，用树状结构展示看起来更加简洁清晰一点。API树结构d3.layout.tree()使用默认设置创建一个新的树状布局：tree.nodes(root)根据传入数据计算树的布局返回一组节点数组tree.links(nodes)根据...
D3.js的V5版本-Vue框架中使用-树状图
hsany330的专栏
06-09 1144
一. api简介 d3.tree()，创建一个树状图生成器 d3.tree().size()，定义树的大小 d3.hierarchy()，层级布局，需要和tree生成器一起使用，来得到绘制树所需要的节点数据和边数据 node.descendants()得到所有的节点，已经经过转换的数据 node.links()，得到所有的边，已经经过转换的数据 二.Vue中使用 *点击节点可展开收缩 <template lang='pug'> div.tree-contain...
D3.js--Tree(树)
风火一回，一生不毁
12-30 1万+
html： CSS： .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node { font: 12px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 1.5px; } JS： //定义
d3.js学习笔记-10(布局：树状图、集群图捆、捆图)
qq_40625543的博客
09-15 1767
d3.js学习笔记-09 目录d3.js学习笔记-091 树状图References 1 树状图 在区域内按规则布置节点，再用连线将节点连接起来，最终的图表形似一颗树杆 d3.layout.tree()：创建一个树状图布局 tree.size([width, height])：设定或获取尺寸，参数size是只有两个元素的数组，分别表示宽和高。 tree.nodeSize([nodeSize])：设定或获取各节点的大小，以数组的形式:[x,y] tree.value([value])：设定或获取值访问器，
【D3.js数据可视化系列教程】（二十九）--折叠树
热门推荐
司机大傻
11-05 1万+
折叠树
掌握D3.js：实战示例解析
4. **布局**：D3.js提供了多种内置布局，如力导向图、树图、堆叠区域图等，这些布局可以帮助你快速创建复杂的可视化结构。 5. **交互性**：D3.js的强大之处在于它支持丰富的用户交互。你可以添加点击事件、鼠标悬停...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值