D3实现TREE树状图

最新推荐文章于 2024-05-31 16:38:57 发布

小飞侠-2

最新推荐文章于 2024-05-31 16:38:57 发布

阅读量5.9k

点赞数 1

分类专栏： d3框架学习

d3框架学习专栏收录该内容

12 篇文章 11 订阅

订阅专栏

[html]view plaincopy 
   
print?
 <html>    
   <head>    
         <meta charset="utf-8">    
         <title>树状图</title>    
 <style>  
   
 .node circle {  
   fill: #fff;  
   stroke: steelblue;  
   stroke-width: 1.5px;  
 }  
   
 .node {  
   font: 12px sans-serif;  
 }  
   
 .link {  
   fill: none;  
   stroke: #ccc;  
   stroke-width: 1.5px;  
 }  
   
 </style>  
   </head>   
 <body>  
 <script src="http://d3js.org/d3.v3.min.js"></script>  
 <script>  
   
 var width = 500,  
 height = 500;  
   
 var tree = d3.layout.tree()  
     .size([width, height-200])  
     .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });  
   
 var diagonal = d3.svg.diagonal()  
     .projection(function(d) { return [d.y, d.x]; });  
   
 var svg = d3.select("body").append("svg")  
     .attr("width", width)  
     .attr("height", height)  
     .append("g")  
     .attr("transform", "translate(40,0)");  
   
   
   
 d3.json("city_tree.json", function(error, root) {  
   
     var nodes = tree.nodes(root);  
     var links = tree.links(nodes);  
       
     console.log(nodes);  
     console.log(links);  
       
     var link = svg.selectAll(".link")  
       .data(links)  
       .enter()  
       .append("path")  
       .attr("class", "link")  
       .attr("d", diagonal);  
       
     var node = svg.selectAll(".node")  
       .data(nodes)  
       .enter()  
       .append("g")  
       .attr("class", "node")  
       .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })  
       
     node.append("circle")  
       .attr("r", 4.5);  
       
     node.append("text")  
       .attr("dx", function(d) { return d.children ? -8 : 8; })  
       .attr("dy", 3)  
       .style("text-anchor", function(d) { return d.children ? "end" : "start"; })  
       .text(function(d) { return d.name; });  
     });  
   
 </script>  
           
     </body>    
 </html>    

小飞侠-2

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
D3实现TREE树状图

[html] view plain copy print?html> head> meta charset="utf-8"> title>树状图title> style> .node circle { fill: #fff; stroke: steelblu
复制链接

扫一扫

专栏目录