svg").remove();var width = $("#svg").width(), height = 700, duration = 500, i = 0;var tree = d3.layout.tree() _d3 v7 tree 收缩">
devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【d3】层级树（缩放+折叠）_d3 v7 tree 收缩

作者：Gausst松鼠会 | 2024-02-23 01:38:34

赞

踩

d3 v7 tree 收缩

包含代码点：

效果：

代码：

  1. //清空SVG中的内容
  2. d3.select("#svg>svg").remove();
  3.  
  4. var width = $("#svg").width(),
  5.     height = 700,
  6.     duration = 500,
  7.     i = 0;
  8.  
  9. var tree = d3.layout.tree()
  10.     .size([width, height])
  11.     .separation(function (a, b) {    //获取或设置相邻结点间的间隔(不仅限于兄弟结点)
  12.         if(a.depth == 1 && b.depth == 1){
  13.             return 3;
  14.         }else{
  15.             return (a.parent == b.parent ? 1:2);
  16.         };
  17.     });
  18.  
  19. //定义布局方向(横向)
  20. var diagonal = d3.svg.diagonal()
  21.     .projection(function(d) {
  22.         return [d.y, d.x];
  23.     });
  24.  
  25. // 拖拽及扩大缩放
  26. var zoom = d3.behavior.zoom()
  27.     .scaleExtent([.5, 3])
  28.     .on('zoom', function () {
  29.         svg.attr("transform", "translate(" + (d3.event.translate[0]+150) +","+ d3.event.translate[1] + ") scale(" + d3.event.scale + ")");
  30.     });
  31.  
  32. var svg = d3.select("#svg").append("svg")
  33.     .call(zoom)  //给svg绑定zoom事件  
  34.     .attr("width", width)
  35.     .attr("height", height)
  36.     .append("g")
  37.     .attr("transform", "translate(150, 0)");  // 将图整体下移，以防止顶部节点被遮挡
  38. //根据数据生成nodes集合
  39. var nodes = tree.nodes(this.analyzeList);
  40. //记录现在的位置
  41. nodes.forEach(function(d){
  42.     d.x0 = d.x;
  43.     d.y0 = d.y;
  44. });
  45. //获取node集合的关系集合
  46. var links = tree.links(nodes);
  47. links.forEach(function (d) {
  48.     d.target.y = d.target.y+100;
  49.     if(d.source.depth==4 && d.source.children && d.source.children.length>0){ //携带附件
  50.         d.target.y = d.target.y+200;
  51.     };
  52. });
  53. //为关系集合设置贝塞尔曲线连接
  54. var link = svg.selectAll(".link")
  55.     .data(links)
  56.     .enter()
  57.     .append("path")
  58.     .attr("class", "link")
  59.     .attr("d", function(d) {
  60.         let x0 = d.source.x,
  61.             y0 = d.source.y,
  62.             x1 = d.target.x,
  63.             y1 = d.target.y- 55,
  64.             r = y1 - y0;
  65.         return `M ${y0},${x0} C ${y0 + r / 2},${x0} ${y0 + r / 2},${x1} ${y1},${x1}`;
  66.     });
  67.  
  68. var node = svg.selectAll(".node")
  69.     .data(nodes)
  70.     .enter()
  71.     .append("g")
  72.     .attr("class", "node")
  73.     .attr("transform", function (d) {
  74.         return "translate(" + (d.y-50) + "," + d.x + ")";
  75.     })
  76.     .on("click", nodeClick);
  77.  
  78. // 绘制矩形与文字
  79. node.append("rect")
  80.     .attr('width', function(d){
  81.         let width = 0;
  82.         if(d.depth==0 || d.depth==1){
  83.             width = 100;
  84.         }else if(d.children && d.children.length>0){
  85.             width = 15;
  86.             angular.forEach(d.name, function (te) {
  87.                 if(/[^A-Za-z0-9]/.test(te)){
  88.                     width += 12;
  89.                 }else{
  90.                     width += 6;
  91.                 };
  92.             });
  93.         };
  94.         return (width>100)?100:width;
  95.     })
  96.     .attr('height', function(d){
  97.         return d.depth==0 || d.depth==1?'40':'14';
  98.     })
  99.     .attr('y', function(d){
  100.         return d.depth==0 || d.depth==1?'-20':'-8';
  101.     })
  102.     .attr('x', function(d){
  103.         return d.depth==0 || d.depth==1?'-30':'0';
  104.     })
  105.     .attr('ry', 5)
  106.     .attr('rx', 5)
  107.     .attr('fill', function(d){
  108.         let fill = '';
  109.         if(d.depth==0){
  110.             fill = '#e04a4a';
  111.         }else if(d.depth==1){
  112.             fill = '#c79329';
  113.         }else{
  114.             fill = 'white';
  115.         };
  116.         return fill;
  117.     })
  118.     .attr('stroke', function(d){
  119.         let stroke = '';
  120.         if(d.depth==0){
  121.             stroke = 'red';
  122.         }else if(d.depth==1){
  123.             stroke = '#a57107';
  124.         }else{
  125.             stroke = 'white';
  126.         };
  127.         return stroke;
  128.     })
  129.     .attr('strokeWidth', '2px');
  130.  
  131. node.append("circle")
  132.     .attr("r", 4.5)
  133.     .attr('fill', function(d){
  134.         let fill = '';
  135.         if(d.depth==0 || d.depth==1){
  136.             fill = 'none';
  137.         }else if(d.click){
  138.             fill = $rootScope.theme.chartColor || '#0073BA';
  139.         }else{
  140.             fill = '#faaa65';
  141.         };
  142.         return fill;
  143.     })
  144.     .attr('stroke', function(d){
  145.         let stroke = '';
  146.         if(d.depth==0 || d.depth==1){
  147.             stroke = 'none';
  148.         }else if(d.click){
  149.             stroke = $rootScope.theme.chartColor || '#0073BA';
  150.         }else{
  151.             stroke = '#faaa65';
  152.         };
  153.         return stroke;
  154.     })
  155.     .attr('strokeWidth', function(d){
  156.         return d.depth==0 || d.depth==1?'0':'2px';
  157.     });
  158.  
  159. node.append("text")
  160.     .attr('y', function(d){
  161.         return d.depth==0 || d.depth==1?'5':'4';
  162.     })
  163.     .attr("x", function (d) {
  164.         return d.depth==0 || d.depth==1?'20':'10';
  165.     })
  166.     .attr("text-anchor", function(d){
  167.         return d.depth==0 || d.depth==1?'middle':'start';
  168.     })
  169.     .attr('fill', function(d){
  170.         return d.depth==0 || d.depth==1?'white':'';
  171.     })
  172.     .text(function (d) {
  173.         let text = "";
  174.         if(d.children && d.name.length>7){
  175.             text = d.name.slice(0,7)+'...';
  176.         }else{
  177.             text = d.name+(d.key?"：":'');
  178.         };
  179.         if(d.click && (d.name == d.key)){
  180.             text = "";
  181.         };
  182.         if(d.parent && d.parent.name == "hash值"){
  183.             text = d.name.slice(0,10) + "...";
  184.         };
  185.         if(d.name == "不同样本Dropper相同文件"){
  186.             text = d.name.slice(0,7) + "...";
  187.         };
  188.         if(d.children){
  189.             text += ' ['+d.children.length+']';
  190.         };
  191.         return text;
  192.     })
  193.     .append("a")
  194.     .attr("class", function (d) {
  195.         return d.click?"click":"noclick";
  196.     })
  197.     .attr("fill", function(d){
  198.         return d.click?($rootScope.theme.chartColor || '#0073BA'):'';
  199.     })
  200.     .text(function (d) {
  201.         return d.key;
  202.     })
  203.     .on("click", function (d) {
  204.         d3.event.stopPropagation();
  205.         if(d.type == 'ip' || d.type == 'domain'){
  206.             $scope.sideBox.query(d3.event, d.key);
  207.         };
  208.     });
  209.  
  210. node.append("title")
  211.     .text(function (d) {
  212.         let title = d.name;
  213.         if(d.allName) title = d.allName;
  214.         if(d.key && d.key != d.name) title = d.name+"："+d.key;
  215.         return title;
  216.     });
  217.  
  218. // 节点点击，隐藏或显示子节点
  219. function nodeClick(d){
  220.     if(d.children || d._children){
  221.         if (d.children){
  222.             d._children = d.children;
  223.             d.children = null;
  224.         }else{
  225.             d.children = d._children;
  226.             d._children = null;
  227.         };
  228.         update(d);
  229.     };
  230. };
  231. //更新布局
  232. function update(source) {
  233.     //计算新树的布局
  234.     var nodes = tree.nodes(self.analyzeList).reverse(),
  235.         links = tree.links(nodes);
  236.     //树的深度这里树d.y。树的宽度最大720，要分四层，所以每层就乘180
  237.     nodes.forEach(function(d) {
  238.         d.y = d.depth * 180;// 树的x,y倒置了，所以这里Y其实是横向的
  239.     });
  240.     links.forEach(function (d) {
  241.         d.target.y = d.target.y+100;
  242.         if(d.source.depth==4 && d.source.children && d.source.children.length>0){ //携带附件
  243.             d.target.y = d.target.y+200;
  244.         };
  245.     });
  246.     //数据连接，根据id绑定数据
  247.     var node = svg.selectAll("g.node")
  248.         .data(nodes, function(d) {
  249.             return d.id //最初新点开的节点都没有id
  250.                 || (d.id = ++i); //为没有id的节点添加上ID
  251.         });
  252.     //点击时增加新的子节点
  253.     var nodeEnter = node.enter().append("g")
  254.         .attr("class", "node")
  255.         .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
  256.         .on("click", nodeClick);
  257.     // 绘制矩形与文字
  258.     nodeEnter.append("rect")
  259.         .attr('width', function(d){
  260.             let width = 0;
  261.             if(d.depth==0 || d.depth==1){
  262.                 width = 100;
  263.             }else if(d.children && d.children.length>0){
  264.                 width = 15;
  265.                 angular.forEach(d.name, function (te) {
  266.                     if(/[^A-Za-z0-9]/.test(te)){
  267.                         width += 12;
  268.                     }else{
  269.                         width += 6;
  270.                     };
  271.                 });
  272.             };
  273.             return (width>100)?100:width;
  274.         })
  275.         .attr('height', function(d){
  276.             return d.depth==0 || d.depth==1?'40':'14';
  277.         })
  278.         .attr('y', function(d){
  279.             return d.depth==0 || d.depth==1?'-20':'-8';
  280.         })
  281.         .attr('x', function(d){
  282.             return d.depth==0 || d.depth==1?'-30':'0';
  283.         })
  284.         .attr('ry', 5)
  285.         .attr('rx', 5)
  286.         .attr('fill', function(d){
  287.             let fill = '';
  288.             if(d.depth==0){
  289.                 fill = '#e04a4a';
  290.             }else if(d.depth==1){
  291.                 fill = '#c79329';
  292.             }else{
  293.                 fill = 'white';
  294.             };
  295.             return fill;
  296.         })
  297.         .attr('stroke', function(d){
  298.             let stroke = '';
  299.             if(d.depth==0){
  300.                 stroke = 'red';
  301.             }else if(d.depth==1){
  302.                 stroke = '#a57107';
  303.             }else{
  304.                 stroke = 'white';
  305.             };
  306.             return stroke;
  307.         })
  308.         .attr('strokeWidth', '2px');
  309.  
  310.     nodeEnter.append("circle")
  311.         .attr("r", 4.5)
  312.         .attr('fill', function(d){
  313.             let fill = '';
  314.             if(d.depth==0 || d.depth==1){
  315.                 fill = 'none';
  316.             }else if(d.click){
  317.                 fill = $rootScope.theme.chartColor || '#0073BA';
  318.             }else{
  319.                 fill = '#faaa65';
  320.             };
  321.             return fill;
  322.         })
  323.         .attr('stroke', function(d){
  324.             let stroke = '';
  325.             if(d.depth==0 || d.depth==1){
  326.                 stroke = 'none';
  327.             }else if(d.click){
  328.                 stroke = $rootScope.theme.chartColor || '#0073BA';
  329.             }else{
  330.                 stroke = '#faaa65';
  331.             };
  332.             return stroke;
  333.         })
  334.         .attr('strokeWidth', function(d){
  335.             return d.depth==0 || d.depth==1?'0':'2px';
  336.         });
  337.  
  338.     nodeEnter.append("text")
  339.         .attr('y', function(d){
  340.             return d.depth==0 || d.depth==1?'5':'4';
  341.         })
  342.         .attr("x", function (d) {
  343.             return d.depth==0 || d.depth==1?'20':'10';
  344.         })
  345.         .attr("text-anchor", function(d){
  346.             return d.depth==0 || d.depth==1?'middle':'start';
  347.         })
  348.         .attr('fill', function(d){
  349.             return d.depth==0 || d.depth==1?'white':'';
  350.         })
  351.         .text(function (d) {
  352.             let text = "";
  353.             if(d.children && d.name.length>7){
  354.                 text = d.name.slice(0,7)+'...';
  355.             }else{
  356.                 text = d.name+(d.key?"：":'');
  357.             };
  358.             if(d.click && (d.name == d.key)){
  359.                 text = "";
  360.             };
  361.             if(d.parent && d.parent.name == "hash值"){
  362.                 text = d.name.slice(0,10) + "...";
  363.             };
  364.             if(d.name == "不同样本Dropper相同文件"){
  365.                 text = d.name.slice(0,7) + "...";
  366.             };
  367.             if(d.children){
  368.                 text += ' ['+d.children.length+']';
  369.             };
  370.             return text;
  371.         })
  372.         .append("a")
  373.         .attr("class", function (d) {
  374.             return d.click?"click":"noclick";
  375.         })
  376.         .attr("fill", function(d){
  377.             return d.click?($rootScope.theme.chartColor || '#0073BA'):'';
  378.         })
  379.         .text(function (d) {
  380.             return d.key;
  381.         })
  382.         .on("click", function (d) {
  383.             d3.event.stopPropagation();
  384.             if(d.type == 'ip' || d.type == 'domain'){
  385.                 $scope.sideBox.query(d3.event, d.key);
  386.             };
  387.         });
  388.  
  389.     nodeEnter.append("title")
  390.         .text(function (d) {
  391.             let title = d.name;
  392.             if(d.allName) title = d.allName;
  393.             if(d.key && d.key != d.name) title = d.name+"："+d.key;
  394.             return title;
  395.         });
  396.     //原有节点更新到新位置
  397.     var nodeUpdate = node.transition()
  398.         .duration(duration)
  399.         .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
  400.     nodeUpdate.select("text")
  401.         .style("fill-opacity", 1);
  402.  
  403.     //折叠节点的子节点收缩回来
  404.     var nodeExit = node.exit().transition()
  405.         .duration(duration)
  406.         .attr("transform", function(d) {
  407.             return "translate(" + source.y + "," + source.x + ")";
  408.         })
  409.         .remove();
  410.     nodeExit.select("circle")
  411.         .attr("r", 1e-6);
  412.     nodeExit.select("text")
  413.         .style("fill-opacity", 1e-6);
  414.     //数据连接，根据目标节点的id绑定数据
  415.     var link = svg.selectAll("path.link")
  416.         .data(links, function(d) { return d.target.id; });
  417.     //增加新连接
  418.     link.enter().insert("path", "g")
  419.         .attr("class", "link")
  420.         .attr("d", function(d) {
  421.             var o = {x: source.x0, y: source.y0};
  422.             return diagonal({source: o, target: o});
  423.         });
  424.     //原有连接更新位置
  425.     link.transition()
  426.         .duration(duration)
  427.         .attr("d", diagonal);
  428.     //折叠的链接，收缩到源节点处
  429.     link.exit().transition()
  430.         .duration(duration)
  431.         .attr("d", function(d) {
  432.             var o = {x: source.x, y: source.y};
  433.             return diagonal({source: o, target: o});
  434.         })
  435.         .remove();
  436.     // 把旧位置存下来，用以过渡
  437.     nodes.forEach(function(d) {
  438.         d.x0 = d.x;
  439.         d.y0 = d.y;
  440.     });
  441. };

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/132759
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号