d3自定义树图备份

最新推荐文章于 2024-05-31 16:38:57 发布
最新推荐文章于 2024-05-31 16:38:57 发布
阅读量951 收藏
点赞数
分类专栏： d3框架学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26562641/article/details/78021410
版权
//全局设置同步
$.ajaxSetup({
 async: false
    });
    var tree = CollapsibleTree("body");
    tree.init("/sistem/getdata/drawing/roottree?entName="+comName+"&type="+getDataType);
  //回复异步
$.ajaxSetup({
 async: true

    });


var CollapsibleTree = function(elt) {



var company_open = "../../images/cross.png";//+号
var company_close = "../../images/minus.png";//-号



  var m = [20, 50, 20, 50],
      w = 1366 - m[1] - m[3],
      h = 1000 - m[0] - m[2],
      i = 0,
      root,_root,lasetNode;//保存点击到的2级节点
  var tree = d3.layout.tree()
      // .size([h, w]);
      .size([w, h]);
  function zoom() {
//      visa.attr("transform", "scale(" + d3.event.scale + ")");
    }
// var zoomListener = d3.behavior.zoom().scaleExtent([0.5, 3]).on("zoom", zoom);
  var parentdiagonal = d3.svg.diagonal()
      .projection(function(d) { return [d.x, -d.y]; });


  var childdiagonal = d3.svg.diagonal()
      .projection(function(d) { return [d.x, d.y]; });


  var visa = d3.select(elt).append("svg:svg")
      .attr("width", w + m[1] + m[3])
      .attr("height", h + m[0] + m[2]);
//     .call(zoomListener);
  
  var vis = visa.append("svg:g")
  .attr("transform", "translate(30,"+h/5+")"); // bidirectional-tree
  
  //背景图片
  var defs = vis.append("defs").attr("id", "imgdefs")
  //-号图片
var company_close_nodes = defs.append("pattern")
.attr("id", "company_close")
.attr("height", 1)
.attr("width", 1)
company_close_nodes.append("image")
.attr("x", 0)
.attr("y", 0)
.attr("width",26)
.attr("height", 26)
.attr("href", company_close)
//+号
var company_open_nodes = defs.append("pattern")
.attr("id", "company_open")
.attr("height", 1)
.attr("width", 1)
company_open_nodes.append("image")
.attr("x", 0)
.attr("y", 0)
.attr("width",26)
.attr("height", 26)
.attr("href", company_open)


  var that = {
    init: function(url) {
      var that = this;
      d3.json(url, function(json) {
     _loading.close();
        root = json.data;
        _root = root;
//        console.info(JSON.stringify(root));
         root.x0 = h / 2 ;
         root.y0 = 0;
//        root.children.forEach(that.toggleAll);
        //根节点上下画图
        that.updateBoth(root);
      });
    },
    updateBoth: function(source) {
      var duration = d3.event && d3.event.altKey ? 5000 : 500;


      var nodes = tree.nodes(root).reverse();
      
      rootNods = nodes;
      
      nodes.forEach(function(d) { d.y = d.depth * 100; });
      
      var node = vis.selectAll("g.node")
          .data(nodes, function(d) { return d.id || (d.id = ++i); });


      var nodeEnter = node.enter().append("svg:g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + source.x0 + "," + source.y0 + ")"; })
//          .on("mousemove",function(d,i){//移入节点   显示文本内容
//          var text = d3.select(this)[0][0].lastChild;
//          text.style.display = "block";
//          })
//          .on("mouseleave", function(d,i) {//移除节点  隐藏文本内容
//          var text = d3.select(this)[0][0].lastChild;
//          text.style.display = "none";
// })
          .on("click", function(d) {
         //绑定点击时间   isparent =false  子节点向下画图  反之向上画图
         if(d == root){
         that.toggle(_root);
         }else if(d.isparent){ // 跟节点点击事件  归属于父节点操作
         lasetNode = d; //保存点击到的2级节点
         that.togglePrent(d);
         }else{
         lasetNode = d;
         that.toggleChild(d);
         }
        });


      nodeEnter.append("svg:circle")
          .attr("r", 13)
          .style("fill", function(d) { 
          return "url(#company_open)";
         });


      nodeEnter.append("svg:text")
          .attr("x", function(d) {
            if( that.isParent(d) ) {
              return -14;
            } else {
              return d.children || d._children ? -14 : 14;
            }
          })
          .attr("dy", ".35em")
          .style('fill', "#b8b6b6")
//          .style("display", function(d){
// return "none";
// })
          .attr("text-anchor", function(d) {
            if( that.isParent(d) ) {
              return "end";
            } else {
              return d.children || d._children ? "end" : "start";
            }
          })
          .attr("transform",function(d) {
            if( d != root ) {
              if( that.isParent(d) ) {
                return "rotate(90)";
              } else {
                return "rotate(90)";
              }            
            }
          })
          .text(function(d) { return d.name; })
          .style("fill-opacity", 8);
     
     
     
      var nodeUpdate = node.transition()
          .duration(duration)
          .attr("transform", function(d) {
            if( that.isParent(d) ) {
              return "translate(" + d.x + "," + -d.y + ")";
            } else {
              return "translate(" + d.x + "," + d.y + ")";
            }
          });


      nodeUpdate.select("circle")
          .attr("r", 13)
          .style("fill", function(d) { 
         if(d.parents ==null || d.children == null){
         return "url(#company_open)";
         }else{
         return "url(#company_close)";
         }
          });


      nodeUpdate.select("text")
          .style("fill-opacity", 1);


      var nodeExit = node.exit().transition()
          .duration(duration)
          .attr("transform", function(d) { return "translate(" + source.x + "," + source.y + ")"; })
          .remove();


      nodeExit.select("circle")
          .attr("r", 13);


      nodeExit.select("text")
          .style("fill-opacity", 13);
//
      var link = vis.selectAll("path.link")
          .data(tree.links_parents(nodes).concat(tree.links(nodes)), function(d) { return d.target.id; });


      link.enter().insert("svg:path", "g")
          .attr("class", "link")
          .attr("d", function(d) {
            var o = {x: source.x0, y: source.y0};
            if( that.isParent(d.target) ) {
              return parentdiagonal({source: o, target: o});
            } else {
              return childdiagonal({source: o, target: o});
            }
          })
        .transition()
          .duration(duration)
          .attr("d", function(d) {
            if( that.isParent(d.target) ) {
              return parentdiagonal(d);
            } else {
              return childdiagonal(d);
            }
          })
//
      link.transition()
          .duration(duration)
          .attr("d", function(d) {
            if( that.isParent(d.target) ) {
              return parentdiagonal(d);
            } else {
              return childdiagonal(d);
            }
          })


      link.exit().transition()
          .duration(duration)
          .attr("d", function(d) {
            var o = {x: source.x, y: source.y};
            if( that.isParent(d.target) ) {
              return parentdiagonal({source: o, target: o});
            } else {
              return childdiagonal({source: o, target: o});
            }
          })
          .remove();


      nodes.forEach(function(d) {
        d.x0 = d.x;
        d.y0 = d.y;
      });
    },
    updateParents: function(source) {
      var duration = d3.event && d3.event.altKey ? 5000 : 500;


      var nodes =  tree.nodes(_root).reverse();


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


      var node = vis.selectAll("g.node")
          .data(nodes, function(d) { return d.id || (d.id = ++i); });


      var nodeEnter = node.enter().append("svg:g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + source.x0 + "," + source.y0 + ")"; })
//          .on("mousemove",function(d,i){//移入节点   显示文本内容
//          var text = d3.select(this)[0][0].lastChild;
//          text.style.display = "block";
//          })
//          .on("mouseleave", function(d,i) {//移除节点  隐藏文本内容
//          var text = d3.select(this)[0][0].lastChild;
//          text.style.display = "none";
// })
          .on("click", function(d) { that.togglePrent(d); });//that.updateParents(d);


      nodeEnter.append("svg:circle")
          .attr("r",13)
          .style("fill", function(d) { 
         return "url(#company_open)";
          });


      nodeEnter.append("svg:text")
     .attr("x", function(d) {
       if( that.isParent(d) ) {
         return -14;
       } else {
         return d.children || d._children ? -14 : 14;
       }
     })
     .attr("dy", ".35em")
     .style('fill', "#b8b6b6")
//      .style("display", function(d){
// return "none";
// })
     .attr("text-anchor", function(d) {
       if( that.isParent(d) ) {
         return "end";
       } else {
         return d.children || d._children ? "end" : "start";
       }
     })
     .attr("transform",function(d) {
       if( d != root ) {
         if( that.isParent(d) ) {
           return "rotate(90)";
         } else {
           return "rotate(90)";
         }            
       }
     })
     .text(function(d) { return d.name; })
     .style("fill-opacity", 8);
     
      var nodeUpdate = node.transition()
     .duration(duration)
     .attr("transform", function(d) {
       if( that.isParent(d) ) {
         return "translate(" + d.x + "," + -d.y + ")";
       } else {
         return "translate(" + d.x + "," + d.y + ")";
       }
     });


      nodeUpdate.select("circle")
          .attr("r", 13)
          .style("fill", function(d) {
         if(d.parents == null){
         return "url(#company_open)";
         }else{
         return "url(#company_close)";
         }
          });


      nodeUpdate.select("text")
          .style("fill-opacity", 1);


      var mynode = node.exit().transition()
          .duration(duration)
          .attr("transform", function(d) { return "translate(" + source.x + "," + source.y + ")"; })
          .remove();
      
      mynode.select("circle")
          .attr("r", 13);


      mynode.select("text")
          .style("fill-opacity", 8);


       lasetlink = vis.selectAll("path.link")
      .data(tree.links_parents(nodes).concat(tree.links(nodes)), function(d) { return d.target.id; });
      
       lasetlink.enter().insert("svg:path", "g")
     .attr("class", "link")
     .attr("d", function(d) {
       var o = {x: source.x0, y: source.y0};
       if( that.isParent(d.target) ) {
         return parentdiagonal({source: o, target: o});
       } else {
         return childdiagonal({source: o, target: o});
       }
     })
   .transition()
     .duration(duration)
     .attr("d", function(d) {
       if( that.isParent(d.target) ) {
         return parentdiagonal(d);
       } else {
         return childdiagonal(d);
       }
     });


       lasetlink.transition()
     .duration(duration)
     .attr("d", function(d) {
       if( that.isParent(d.target) ) {
         return parentdiagonal(d);
       } else {
         return childdiagonal(d);
       }
     })


     
      lasetlink.exit().transition()
          .duration(duration)
          .attr("d", function(d) {
            var o = {x: source.x, y: source.y};
            if( that.isParent(d.target) ) {
              return parentdiagonal({source: o, target: o});
            } else {
              return childdiagonal({source: o, target: o});
            }
          })
          .remove();


      nodes.forEach(function(d) {
        d.x0 = d.x;
        d.y0 = d.y;
      });
    },    
    updateChildren: function(source) {
      var duration = d3.event && d3.event.altKey ? 5000 : 500;


      var nodes = tree.nodes(_root).reverse();
      
      nodes.forEach(function(d) { d.y = d.depth * 100; });


      var node = vis.selectAll("g.node")
          .data(nodes, function(d) { return d.id || (d.id = ++i); });


      var nodeEnter = node.enter().append("svg:g")
          .attr("class", "node")
          .attr("transform", function(d) { 
         return "translate(" + source.x0 + "," + source.y0 + ")"; 
//          return "translate(" + (source.x0 - 90) + "," + (source.y0-90) + ")"; //原来节点缩小90
//          return "rotate(" + (source.x0 - 90) + ")translate(" + source.y0 + ")";
         })
//           .on("mousemove",function(d,i){//移入节点   显示文本内容
//           var text = d3.select(this)[0][0].lastChild;
//          text.style.display = "block";
//          })
//          .on("mouseleave", function(d,i) {//移除节点  隐藏文本内容
//          var text = d3.select(this)[0][0].lastChild;
//          text.style.display = "none";
// })
          .on("click", function(d) {  that.toggleChild(d);  });//that.updateChildren(d);


      nodeEnter.append("svg:circle")
          .attr("r", 13)
          .style("fill", function(d) {
         return "url(#company_open)";
          });


      var child_node =  nodeEnter.append("svg:text")
     .attr("x", function(d) {
         if( that.isParent(d) ) {
           return -14;
         } else {
           return d.children || d._children ? -14 : 14;
         }
       })
       .attr("dy", ".35em")
       .style('fill', "#b8b6b6")
//        .style("display", function(d){
// return "none";
// })
       .attr("text-anchor", function(d) {
         if( that.isParent(d) ) {
           return "end";
         } else {
           return d.children || d._children ? "end" : "start";
         }
       })
       .attr("transform",function(d) {
         if( d != root ) {
           if( that.isParent(d) ) {
             return "rotate(90)";
           } else {
             return "rotate(90)";
           }            
         }
       })
       .text(function(d) { return d.name; })
       .style("fill-opacity", 8);
      
      var nodeUpdate = node.transition()
     .duration(duration)
     .attr("transform", function(d) {
       if( that.isParent(d) ) {
         return "translate(" + d.x + "," + -d.y + ")";
       } else {
         return "translate(" + d.x + "," + d.y + ")";
       }
     });


      nodeUpdate.select("circle")
          .attr("r",13)
          .style("fill", function(d) {
         if(d.children == null){
         return "url(#company_open)";
         }else{
         return "url(#company_close)";
         }
          });


      nodeUpdate.select("text")
          .style("fill-opacity", 1);
      
    
      //展开当前节点
     var mynode = node.exit().transition()
          .duration(duration)
          .attr("transform", function(d) { return "translate(" + source.x + "," + source.y + ")"; })
          .remove();
     
     
     
      mynode.select("circle")
          .attr("r", 13);


      mynode.select("text")
          .style("fill-opacity", 8);


      lasetlink = vis.selectAll("path.link")
          .data(tree.links_parents(nodes).concat(tree.links(nodes)), function(d) { return d.target.id; });


      lasetlink.enter().insert("svg:path", "g")
     .attr("class", "link")
     .attr("d", function(d) {
       var o = {x: source.x0, y: source.y0};
       if( that.isParent(d.target) ) {
         return parentdiagonal({source: o, target: o});
       } else {
         return childdiagonal({source: o, target: o});
       }
     })
   .transition()
     .duration(duration)
     .attr("d", function(d) {
       if( that.isParent(d.target) ) {
         return parentdiagonal(d);
       } else {
         return childdiagonal(d);
       }
     });


      lasetlink.transition()
     .duration(duration)
     .attr("d", function(d) {
       if( that.isParent(d.target) ) {
         return parentdiagonal(d);
       } else {
         return childdiagonal(d);
       }
     })


    lasetlink.exit().transition()
         .duration(duration)
         .attr("d", function(d) {
           var o = {x: source.x, y: source.y};
           if( that.isParent(d.target) ) {
             return parentdiagonal({source: o, target: o});
           } else {
             return childdiagonal({source: o, target: o});
           }
         })
         .remove();


      nodes.forEach(function(d) {
        d.x0 = d.x;
        d.y0 = d.y;
      });
    },


    isParent: function(node) {
      if( node.parent && node.parent != root ) {
     return this.isParent(node.parent);
      } else
      if( node.isparent ) {
        return true;
      } else {
        return false;
      }
    },
    
    //父节点画图   上画图
    togglePrent:function(d){
    d.children = null;
    var name = d.name;
 var ind = name.indexOf("-");
 if(ind>0){
 name = name.substring(0,ind);
 }
 if (d.parents) {
//收缩
        d._parents = d.parents;
        d.parents = null;
      } else {
      if(d._parents != null){
      d.parents = d._parents;
        d._parents = null;
      }else{
      _loading=new PublicLoading();
  _loading.open("正在加载，请稍后...");
    //检索一次
     $.ajax({
    url:"/sistem/getdata/drawing/prenttree?entName="+name+"&type="+getDataType,
    type : "GET", 
    dataType:'json',
    async: false,
    success: function(req) {
    _loading.close();
    if(req.status == 200){
    var child = req.data;
    d.parents = child.parents;
            d._parents = null;
    }
    }
     });
      }
       
      }
 //刷新父节点
 that.updateParents(d); 
    },
    // 子节点画图   下画图
    toggleChild: function(d) {
    var name = d.name;
 var ind = name.indexOf("-");
 if(ind>0){
 name = name.substring(0,ind);
 }
 d.parents = null;
if (d.children) {
//收缩
       d._children = d.children;
       d.children = null;
      
     } else {
     if(d._children !=null){
     //上次是不是保存
     d.children = d._children;
       d._children = null;
     }else{
     _loading=new PublicLoading();
  _loading.open("正在加载，请稍后...");
     //查询一次子节点
     $.ajax({
  url:"/sistem/getdata/drawing/tree?entName="+name+"&type="+getDataType,
  type : "GET", 
  dataType:'json',
  async: false,
  success: function(req) {
  _loading.close();
  if(req.status == 200){
  var child = req.data;
  d.children = child.children;
       d._children = null;
  }
  }
     });
     }
     }
that.updateChildren(d);
    },
    //跟节点画图   上下画图
    toggle: function(d) {
        if (d.children) {
          d._children = d.children;
          d.children = null;
        } else {
          d.children = d._children;
          d._children = null;
        }
        if (d.parents) {
          d._parents = d.parents;
          d.parents = null;
        } else {
          d.parents = d._parents;
          d._parents = null;
        }
        that.updateBoth(d);
      },
      //子节点展开当前节点  收缩上次节点
    toggleCloseChild:function(d){
   
    },
    toggelCloseParent:function(d){
   
    },
    toggleAll: function(d) {
      if (d.children) {
        d.children.forEach(that.toggleAll);
        that.toggleChild(d);
      }
      if (d.parents) {
        d.parents.forEach(that.toggleAll);
        that.togglePrent(d);
      }
    }


  }


  return that;
}


小飞侠-2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
d3-tree.zip
07-30
使用vue.js+d3技术完成生成树的实现 # d3-tree ## Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run serve ``` ### Compiles and minifies for production ``` npm run build ``` ### Run your tests ``` npm run test ``` ### Lints and fixes files ``` npm run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/).
D3树图
测试
09-17 673
介绍 树状图由两个部分组成节点node和连接线link组成,link是一个路径,而node是一个组由text和circle组成,D3能够帮助我们计算路径,计算节点的位置. 示例 https://tinuv.top/MyPages/tree/tree.html 初始化 var width = 1000; var height = 1000; var padd...
dagre-d3画树形拓扑图(包含分组)、流程图
最新发布
qq_40588529的博客
05-31 1125
使用.translateExtent指定[[x0, y0], [x1, y1]]限制用户平移的范围。// 流程图从下向上显示，默认'TB'，可取值'TB'、'BT'、'LR'、'RL'// ranker: "network-simplex",//连线算法。// ranksep: 100, // 层与层之间的间距。// new dagreD3.render()创建渲染器。// compound:true为分组必须配置！// nodesep: 70, // 节点之间间距。// ②创建 graph 对象。
【d3】树图-各种效果集合（附效果图）
W_jin的博客
01-14 1128
效果： 包含代码点： 1、动态请求数据并更新 参考链接：https://www.cnblogs.com/shihuc/p/6064448.html let sideBar= { open(type, d) { // ...http请求... // 数据成功请求后，将数据push到d.children d.children.push(data); // 然后手动调用重新渲染svg函数 _this.releS
d3树形图，类思维导图
01-15
用d3做的一个类思维导图的树形图，可以使用IE浏览器打开。支持树节点的打开和收回
d3+jQuery横向树图demo.zip
04-28
【标题】"d3+jQuery横向树图demo.zip" 是一个使用D3.js库和jQuery技术构建的示例项目，其主要目标是展示如何在横向布局中创建一个交互式的树状图。D3.js（Data-Driven Documents）是Mike Bostock开发的一个强大的...
D3树图数据结构例子
01-12
本文将深入探讨如何利用D3实现树图数据结构，并以"简单树图"为例进行说明。 树图是一种展示层次数据的有效方式，它通过矩形区域的大小和位置来表示节点及其之间的关系。D3中的`treemap layout`函数提供了构建树图的...
elementui:基于elementui的自定义树图兼模糊搜寻组件
04-29
模态这是SmileSun进行练习的项目一个Vue.js项目构建设置# install nodejs npm webpack operatorhttp://nodejs.cn/download/# install taobao.org mirror$ npm install -g cnpm --registry=...
d3+jQuery横向树图.zip
05-06
标题 "d3+jQuery横向树图.zip" 涉及的主要技术是数据可视化中的D3.js库和jQuery，用于创建一种特殊的树状图——横向树图。这种图表在展示复杂层级关系时非常有效，尤其适合有限的空间展示大量数据。下面我们将深入...
vued3treeVUE实现自定义节点的树结构
08-09
vued3treeVUE实现自定义节点的树结构
d3js呈现中国城市名称数据树
11-18
对网上d3树的整理 对d3中单节点单击和双击事件 互不影响的处理 （此资源需要在服务器上才能测试允许 因为代码中对json数据模拟真实情况进行请求的）
java统计代码行数生成json文件+D3.js绘制树图（矩形分区图、圆状集群图、矩阵树图）+实验报告
01-02
大数据可视化课程作业，从网上下载一个工程，用java统计工程的目录结构及代码行数，生成json文件，用D3.js绘制工程目录结构的树型结构图（矩形分区图、圆状集群图、矩阵树图）
collapsibleTree：使用D3.js在R中创建交互式可折叠树图
02-05
可折叠树0.1.7 collapsibleTree是R ，可让您使用D3.js（根据Mike Bostock的改编）来创建交互式可折叠的Reingold-Tilford树形图。 无需担心嵌套列表或JSON对象，即可将数据框架变成分层可视化！ 如果您使用的是 ，则可以将最近单击的节点绑定到Shiny输入，从而可以更轻松地与复杂的嵌套对象进行交互。 输入将返回一个命名列表，其中包含最近选择的节点及其所有父节点。 有关更多信息，请参见。 安装 # Install package from CRAN: install.packages( " collapsibleTree " ) # Altern
collapsible-tree-javascript-diagram:一张交互式图中JavaScript的全部语言
05-09
可折叠树JavaScript图 在此处播放此交互式JavaScript图表： : 该图采用了coodict的“一张图片中JavaScript”的工作： : ，并使用Mike Bostock的d3.js将其转换为可折叠的树格式，在此处找到： : 。 我喜欢能够与复杂的树形图交互，随意扩展和收缩以探索其不同分支的想法。 整个图像，完全展开： 图片部分展开：
BIEE使用d3生成自定义图形
cnm123456001的博客
04-01 175
BIEE使用d3生成自定义图形 问题： BIEE本身自带了很多种表格和图形的展现方式，甚至在后期加入了格状图这种表格+图形的展现方式。 但...
d3 树形图的使用
loveljy_19901114的博客
08-09 3845
d3 树形图的使用 首先声明一下，这个树形图的使用方法是在 http://wiki.jikexueyuan.com/project/d3wiki/tree.html 的例子上添加了一小部分功能，大家可以先去看一下原版的实现，然后再来看这篇，不然我都不知道我在说什么。 原文章最后的树状图如下： 实现这个图的源码可以在这个链接的最下面下载。 我们想要实现的那一小部分功能是：举例...
【学习】D3树图，（目的：绑定文本数据，加箭头） 2
神创的博客
03-12 540
上图：---------------------------------------------------------------------------------------------------------------------------绘制------------------------------------------------------------------------...
vue +D3组件开发之treemap(树图)
07-15
你好！对于Vue和D3的组件开发，你可以使用Vue的生命周期钩子函数将D3与Vue组件集成起来。以下是一个简单的示例，展示如何使用Vue和D3创建一个treemap（树图）组件： 首先，安装必要的依赖： ```bash npm install d3 ``` 接下来，创建一个名为Treemap.vue的Vue组件，并在其中引入D3库： ```vue <template> <div ref="treemap"></div> </template> <script> import * as d3 from 'd3'; export default { mounted() { this.drawTreemap(); }, methods: { drawTreemap() { // 获取DOM元素的引用 const container = this.$refs.treemap; // 创建数据数组 const data = [ { name: 'A', value: 10 }, { name: 'B', value: 20 }, { name: 'C', value: 30 }, // ... ]; // 创建treemap布局 const treemapLayout = d3.treemap() .size([500, 300]) .padding(1); // 转换数据为适用于treemap的层次结构 const root = d3.hierarchy({ children: data }) .sum(d => d.value) .sort((a, b) => b.value - a.value); // 根据treemap布局计算节点位置和大小 treemapLayout(root); // 创建矩形元素并绑定数据 const rects = d3.select(container) .selectAll('rect') .data(root.leaves()); // 更新已存在的矩形 rects.attr('x', d => d.x0) .attr('y', d => d.y0) .attr('width', d => d.x1 - d.x0) .attr('height', d => d.y1 - d.y0) .attr('fill', 'steelblue'); // 创建新的矩形 rects.enter() .append('rect') .attr('x', d => d.x0) .attr('y', d => d.y0) .attr('width', d => d.x1 - d.x0) .attr('height', d => d.y1 - d.y0) .attr('fill', 'steelblue'); // 移除多余的矩形 rects.exit().remove(); } } } </script> ``` 以上代码演示了如何使用D3的treemap布局来创建一个简单的树图（treemap），你可以根据实际需求进行进一步的定制和样式调整。 希望这个示例能对你有所帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值