d3樹左右上下反轉(zhuǎn)

本文基于Adoins前輩D3 縱向組織結構樹文章實現(xiàn)個性化改變腋颠。

  1. 左側樹
image.png
<!DOCTYPE html>
<html>
  <head>
    <title>左側樹</title>
    
    <script type="text/javascript" src="http://d3js.org/d3.v5.min.js">
    </script>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    <svg width="960" height="600"></svg>
    <script>
        //定義邊界
        var marge = {top:50, bottom:0, left:10, right:0};
    
        var svg = d3.select("svg");
        var width = svg.attr("width");
        var height = svg.attr("height");
        
        var g = svg.append("g")
            .attr("transform","translate("+marge.top+","+marge.left+")");
        
        var scale = svg.append("g")
            .attr("transform","translate("+marge.top+","+marge.left+")");
        //數(shù)據(jù)
        var dataset = {
            name:"中國",
            children:[
                {
                    name:"浙江",
                    children:[
                        {name:"杭州" ,value:100},
                        {name:"寧波",value:100},
                        {name:"溫州",value:100},
                        {name:"紹興",value:100}
                    ]
                },
                {
                    name:"廣西",
                    children:[
                        {
                            name:"桂林",
                            children:[
                                {name:"秀峰區(qū)",value:100},
                                {name:"疊彩區(qū)",value:100},
                                {name:"象山區(qū)",value:100},
                                {name:"七星區(qū)",value:100}
                            ]
                        },
                        {name:"南寧",value:100},
                        {name:"柳州",value:100},
                        {name:"防城港",value:100}
                    ]
                },
                {
                    name:"黑龍江",
                    children:[
                        {name:"哈爾濱",value:100},
                        {name:"齊齊哈爾",value:100},
                        {name:"牡丹江",value:100},
                        {name:"大慶",value:100}
                    ]
                },
                {
                    name:"新疆" , 
                    children:
                    [
                        {name:"烏魯木齊"},
                        {name:"克拉瑪依"},
                        {name:"吐魯番"},
                        {name:"哈密"}
                    ]
                }
            ]
        };
        
        //創(chuàng)建一個hierarchy layout
        var hierarchyData = d3.hierarchy(dataset)
            .sum(function(d){
                return d.value;
            });
            
        //創(chuàng)建一個樹狀圖
        var tree = d3.tree()
            .size([width-400,height-200])
            .separation(function(a,b){
                return (a.parent==b.parent?1:2)/a.depth;
            })
        
        //初始化樹狀圖，也就是傳入數(shù)據(jù),并得到繪制樹基本數(shù)據(jù)
        var treeData = tree(hierarchyData);
        console.log(treeData);
        //得到節(jié)點
        var nodes = treeData.descendants();
        var links = treeData.links();
        
        //輸出節(jié)點和邊
        console.log(nodes);
        console.log(links);
        
        //創(chuàng)建一個貝塞爾生成曲線生成器
        var Bézier_curve_generator = d3.linkHorizontal()
            .x(function(d) { return d.y; })
            .y(function(d) { return d.x; });
            
        //有了節(jié)點和邊集的數(shù)據(jù)后拧抖，我們就可以開始繪制了，
        //繪制邊
        g.append("g")
            .selectAll("path")
            .data(links)
            .enter()
            .append("path")
            .attr("d",function(d){
                var start = {x:d.source.x,y:d.source.y};
                var end = {x:d.target.x,y:d.target.y};
                return Bézier_curve_generator({source:start,target:end});
            })
            .attr("fill","none")
            .attr("stroke","yellow")
            .attr("stroke-width",1);
            
        //繪制節(jié)點和文字
        //老規(guī)矩绑嘹，先創(chuàng)建用以繪制每個節(jié)點和對應文字的分組<g>
        var gs = g.append("g")
            .selectAll("g")
            .data(nodes)
            .enter()
            .append("g")
            .attr("transform",function(d){
                var cx = d.x;
                var cy= d.y;
                return "translate("+cy+","+cx+")";
            });
        //繪制節(jié)點
        gs.append("circle")
            .attr("r",6)
            .attr("fill","white")
            .attr("stroke","blue")
            .attr("stroke-width",1);
            
        //文字
        gs.append("text")
            .attr("x",function(d){
                return d.children?-40:8;
            })
            .attr("y",-5)
            .attr("dy",10)
            .text(function(d){
                return d.data.name;
            });
            
    </script>
  </body>
</html>

  1. 縱向樹


    image.png
<!DOCTYPE html>
<html>
  <head>
    <title>垂直樹</title>
    
    <script type="text/javascript" src="http://d3js.org/d3.v5.min.js">
    </script>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    <svg width="960" height="600"></svg>
    <script>
        //定義邊界
        var marge = {top:50, bottom:0, left:30, right:0};
    
        var svg = d3.select("svg");
        var width = svg.attr("width");
        var height = svg.attr("height");
        
        var g = svg.append("g")
            .attr("transform","translate("+marge.top+","+marge.left+")");
        
        var scale = svg.append("g")
            .attr("transform","translate("+marge.top+","+marge.left+")");
        //數(shù)據(jù)
        var dataset = {
            name:"中國",
            children:[
                {
                    name:"浙江",
                    children:[
                        {name:"杭州" ,value:100},
                        {name:"寧波",value:100},
                        {name:"溫州",value:100},
                        {name:"紹興",value:100}
                    ]
                },
                {
                    name:"廣西",
                    children:[
                        {
                            name:"桂林",
                            children:[
                                {name:"秀峰區(qū)",value:100},
                                {name:"疊彩區(qū)",value:100},
                                {name:"象山區(qū)",value:100},
                                {name:"七星區(qū)",value:100}
                            ]
                        },
                        {name:"南寧",value:100},
                        {name:"柳州",value:100},
                        {name:"防城港",value:100}
                    ]
                },
                {
                    name:"黑龍江",
                    children:[
                        {name:"哈爾濱",value:100},
                        {name:"齊齊哈爾",value:100},
                        {name:"牡丹江",value:100},
                        {name:"大慶",value:100}
                    ]
                },
                {
                    name:"新疆" , 
                    children:
                    [
                        {name:"烏魯木齊"},
                        {name:"克拉瑪依"},
                        {name:"吐魯番"},
                        {name:"哈密"}
                    ]
                }
            ]
        };
        
        //創(chuàng)建一個hierarchy layout
        var hierarchyData = d3.hierarchy(dataset)
            .sum(function(d){
                return d.value;
            });
            
        //創(chuàng)建一個樹狀圖
        var tree = d3.tree()
            .size([width-400,height-200])
            .separation(function(a,b){
                return (a.parent==b.parent?1:2)/a.depth;
            })
        
        //初始化樹狀圖郭脂，也就是傳入數(shù)據(jù),并得到繪制樹基本數(shù)據(jù)
        var treeData = tree(hierarchyData);
        console.log(treeData);
        //得到節(jié)點
        var nodes = treeData.descendants();
        var links = treeData.links();
        
        //輸出節(jié)點和邊
        console.log(nodes);
        console.log(links);
        
        //創(chuàng)建一個貝塞爾生成曲線生成器 // 水平：d3.linkHorizontal() 垂直：d3.linkVertical()
        var Bézier_curve_generator = d3.linkVertical()
            .x(function(d) { return d.x; }) // 水平：d.y 垂直：d.x
            .y(function(d) { return d.y; });// 水平：d.x 垂直：d.y
        //有了節(jié)點和邊集的數(shù)據(jù)后年碘，我們就可以開始繪制了，
        //繪制邊
        g.append("g")
            .selectAll("path")
            .data(links)
            .enter()
            .append("path")
            .attr("d",function(d){
                var start = {x:d.source.x,y:d.source.y};
                var end = {x:d.target.x,y:d.target.y};
                return Bézier_curve_generator({source:start,target:end});
            })
            .attr("fill","none")
            .attr("stroke","yellow")
            .attr("stroke-width",1);
            
        //繪制節(jié)點和文字
        //老規(guī)矩展鸡，先創(chuàng)建用以繪制每個節(jié)點和對應文字的分組<g>
        var gs = g.append("g")
            .selectAll("g")
            .data(nodes)
            .enter()
            .append("g")
            .attr("transform",function(d){
                var cx = d.y; // 水平：d.x 垂直：d.y
                var cy= d.x;  // 水平：d.y 垂直：d.x
                return "translate(" + cy + "," + cx + ")";
            });
        //繪制節(jié)點
        gs.append("circle")
            .attr("r",6)
            .attr("fill","white")
            .attr("stroke","blue")
            .attr("stroke-width",1);
            
        //文字
        gs.append("text")
            .attr("x", function(d){
                return d.children ? -15 : 0;
            })
            .attr("y", function(d) {
                return d.children ? -10 : 15;
            })
            .attr("dy",0)
            .text(function(d){
                return d.data.name;
            })
            .style('writing-mode', function(d) {
                return d.children ? 'horizontal-tb' : 'tb-rl';
            });
            
    </script>
  </body>
</html>

  1. 縱向樹2


    image.png
<!DOCTYPE html>
<html>
  <head>
    <title>垂直直線樹</title>
    
    <script type="text/javascript" src="http://d3js.org/d3.v5.min.js">
    </script>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    <svg width="1280" height="600"></svg>
    <script>
        //定義邊界
        var marge = {top:50, bottom:0, left:10, right:40};
    
        var svg = d3.select("svg");
        var width = svg.attr("width");
        var height = svg.attr("height");
        
        var g = svg.append("g")
            .attr("transform","translate("+marge.top+","+marge.left+")");
        
        var scale = svg.append("g")
            .attr("transform","translate("+marge.top+","+marge.left+")");
        //數(shù)據(jù)
        var dataset = {
            name:"中國",
            children:[
                {
                    name:"浙江",
                    children:[
                        {name:"杭州" ,value:100},
                        {name:"寧波",value:100},
                        {name:"溫州",value:100},
                        {name:"紹興",value:100}
                    ]
                },
                {
                    name:"廣西",
                    children:[
                        {
                            name:"桂林",
                            children:[
                                {name:"秀峰區(qū)",value:100},
                                {name:"疊彩區(qū)",value:100},
                                {name:"象山區(qū)",value:100},
                                {name:"七星區(qū)",value:100}
                            ]
                        },
                        {name:"南寧",value:100},
                        {name:"柳州",value:100},
                        {name:"防城港",value:100}
                    ]
                },
                {
                    name:"黑龍江",
                    children:[
                        {name:"哈爾濱",value:100},
                        {name:"齊齊哈爾",value:100},
                        {name:"牡丹江",value:100},
                        {name:"大慶",value:100}
                    ]
                },
                {
                    name:"新疆" , 
                    children:
                    [
                        {name:"烏魯木齊"},
                        {name:"克拉瑪依"},
                        {name:"吐魯番"},
                        {name:"哈密"}
                    ]
                }
            ]
        };
        
        //創(chuàng)建一個hierarchy layout
        var hierarchyData = d3.hierarchy(dataset)
            .sum(function(d){
                return d.value;
            });
        console.log(hierarchyData); 
        //創(chuàng)建一個樹狀圖
        var tree = d3.tree()
            .size([width-80,height-200])
            .separation(function(a,b){
                return a.parent == b.parent ? 1 : 2;
            })
        
        //初始化樹狀圖屿衅，也就是傳入數(shù)據(jù),并得到繪制樹基本數(shù)據(jù)
        var treeData = tree(hierarchyData);
        console.log(treeData);
        //得到節(jié)點
        var nodes = treeData.descendants();
        var links = treeData.links();
        
        //輸出節(jié)點和邊
        console.log(nodes);
        console.log(links);
        
        //創(chuàng)建一個貝塞爾生成曲線生成器 // 水平：d3.linkHorizontal() 垂直：d3.linkVertical()
        var Bézier_curve_generator = d3.linkVertical()
            .x(function(d) { return d.x; }) // 水平：d.y 垂直：d.x
            .y(function(d) { return d.y; });// 水平：d.x 垂直：d.y
        //有了節(jié)點和邊集的數(shù)據(jù)后，我們就可以開始繪制了娱颊，
        //繪制邊
        var boxWidth = 66, boxHeight = 40;
        g.append("g")
            .selectAll("path")
            .data(links)
            .enter()
            .append("path")
            .attr("d",function(d){
                let sourceX = d.source.x,
                    sourceY = d.source.y + boxHeight,
                    targetX = d.target.x,
                    targetY = d.target.y;

                return "M" + sourceX + "," + sourceY +
                    "V" + ((targetY - sourceY) / 2 + sourceY) +
                    "H" + targetX +
                    "V" + targetY;
                /*
                var start = {x:d.source.x,y:d.source.y};
                var end = {x:d.target.x,y:d.target.y};
                return Bézier_curve_generator({source:start,target:end});
                */
            })
            .attr("fill","none")
            .attr("stroke","red")
            .attr("stroke-width",1);
              
        //繪制節(jié)點和文字
        //老規(guī)矩傲诵，先創(chuàng)建用以繪制每個節(jié)點和對應文字的分組<g>
        var gs = g.append("g")
            .selectAll("g")
            .data(nodes)
            .enter()
            .append("g")
            .attr("transform",function(d){
                var cx = d.y; // 水平：d.x 垂直：d.y
                var cy= d.x;  // 水平：d.y 垂直：d.x
                return "translate(" + cy + "," + cx + ")";
            });
        //繪制節(jié)點
        /*
        gs.append("circle")
            .attr("r",6)
            .attr("fill","white")
            .attr("stroke","blue")
            .attr("stroke-width",1);
        */
        gs.append("rect")
            .attr('y', 0)
            .attr('x', function (d) {
               boxWidth = d.data.name.length * 22;
               return d.depth < 2 ? -(boxWidth / 2) : -(boxHeight / 2)
            })
            .attr('width', function (d) {
               boxWidth = d.data.name.length * 22;
               return d.depth < 2 ? boxWidth : boxHeight;
            })
            .attr('height', function (d) {
               boxWidth = d.data.name.length * 22;
               return d.depth < 2 ? boxHeight : boxWidth;
            })
            // 矩形背景色以及邊框顏色寬度
            .attr('fill', '#fff')
            .attr('stroke', 'steelblue')
            .attr('strokeWidth', '1px')
            .on('click', function (evt) {
               console.log(evt); // 顯示所點擊節(jié)點數(shù)據(jù)
            });
            
        //文字
        gs.append("text")
            .attr('y', function (d) {
                return d.depth < 2 ? boxHeight / 2 + 5 : 5;
            })
            .attr('style', function (d) {
                return d.depth < 2 ? '' : "writing-mode: tb;letter-spacing:0px";
            })
            .attr("text-anchor", function (d) {
                return d.depth < 2 ? 'middle' : "start";
            })
            .text(function(d){
                return d.data.name;
            });
            
    </script>
  </body>
</html>

  1. 左右反轉(zhuǎn)


    image.png
<!DOCTYPE html>
<html>
  <head>
    <title>右側樹</title>
    
    <script type="text/javascript" src="http://d3js.org/d3.v5.min.js">
    </script>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    <svg width="960" height="600"></svg>
    <script>
        //定義邊界
        var marge = {top:50, bottom:0, left:10, right:0};
    
        var svg = d3.select("svg");
        var width = svg.attr("width");
        var height = svg.attr("height");
        
        var g = svg.append("g")
            .attr("transform","translate("+marge.top+","+marge.left+")");
        
        var scale = svg.append("g")
            .attr("transform","translate("+marge.top+","+marge.left+")");
        //數(shù)據(jù)
        var dataset = {
            name:"中國",
            children:[
                {
                    name:"浙江",
                    children:[
                        {name:"杭州" ,value:100},
                        {name:"寧波",value:100},
                        {name:"溫州",value:100},
                        {name:"紹興",value:100}
                    ]
                },
                {
                    name:"廣西",
                    children:[
                        {
                            name:"桂林",
                            children:[
                                {name:"秀峰區(qū)",value:100},
                                {name:"疊彩區(qū)",value:100},
                                {name:"象山區(qū)",value:100},
                                {name:"七星區(qū)",value:100}
                            ]
                        },
                        {name:"南寧",value:100},
                        {name:"柳州",value:100},
                        {name:"防城港",value:100}
                    ]
                },
                {
                    name:"黑龍江",
                    children:[
                        {name:"哈爾濱",value:100},
                        {name:"齊齊哈爾",value:100},
                        {name:"牡丹江",value:100},
                        {name:"大慶",value:100}
                    ]
                },
                {
                    name:"新疆" , 
                    children:
                    [
                        {name:"烏魯木齊"},
                        {name:"克拉瑪依"},
                        {name:"吐魯番"},
                        {name:"哈密"}
                    ]
                }
            ]
        };
        
        //創(chuàng)建一個hierarchy layout
        var hierarchyData = d3.hierarchy(dataset)
            .sum(function(d){
                return d.value;
            });
            
        //創(chuàng)建一個樹狀圖
        var treeWidth = width-400; // *****記錄一下樹的總寬度凯砍，做為左側樹反轉(zhuǎn)為右側樹時使用
        var tree = d3.tree()
            .size([treeWidth,height-200])
            .separation(function(a,b){
                return (a.parent==b.parent?1:2)/a.depth;
            })
        
        //初始化樹狀圖箱硕，也就是傳入數(shù)據(jù),并得到繪制樹基本數(shù)據(jù)
        var treeData = tree(hierarchyData);
        console.log(treeData);
        //得到節(jié)點
        var nodes = treeData.descendants();
        var links = treeData.links();
        
        //輸出節(jié)點和邊
        console.log(nodes);
        console.log(links);
        
        //創(chuàng)建一個貝塞爾生成曲線生成器
        var Bézier_curve_generator = d3.linkHorizontal()
            .x(function(d) { return d.y; })
            .y(function(d) { return d.x; });
            
        //有了節(jié)點和邊集的數(shù)據(jù)后，我們就可以開始繪制了悟衩，
        //繪制邊
        g.append("g")
            .selectAll("path")
            .data(links)
            .enter()
            .append("path")
            .attr("d",function(d){
                var start = {x:d.source.x,y:treeWidth - d.source.y};// *****使用treeWidth減去當前y剧罩，實現(xiàn)反轉(zhuǎn)
                var end = {x:d.target.x,y:treeWidth - d.target.y};  // *****使用treeWidth減去當前y，實現(xiàn)反轉(zhuǎn)
                return Bézier_curve_generator({source:start,target:end});
            })
            .attr("fill","none")
            .attr("stroke","yellow")
            .attr("stroke-width",1);
            
        //繪制節(jié)點和文字
        //老規(guī)矩座泳，先創(chuàng)建用以繪制每個節(jié)點和對應文字的分組<g>
        var gs = g.append("g")
            .selectAll("g")
            .data(nodes)
            .enter()
            .append("g")
            .attr("transform",function(d){
                var cx = d.x;
                var cy= treeWidth - d.y;  // *****使用treeWidth減去當前y惠昔，實現(xiàn)反轉(zhuǎn)
                return "translate("+cy+","+cx+")";
            });
        //繪制節(jié)點
        gs.append("circle")
            .attr("r",6)
            .attr("fill","white")
            .attr("stroke","blue")
            .attr("stroke-width",1);
            
        //文字
        gs.append("text")
            .attr("x",function(d){
                var left = -20 * d.data.name.length;
                return d.children ? 10 : left;
            })
            .attr("y",-5)
            .attr("dy",10)
            .text(function(d){
                return d.data.name;
            });
            
    </script>
  </body>
</html>

  1. 縱向反轉(zhuǎn)


    image.png
<!DOCTYPE html>
<html>
  <head>
    <title>垂直樹(上)</title>
    
    <script type="text/javascript" src="http://d3js.org/d3.v5.min.js">
    </script>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    <svg width="960" height="600"></svg>
    <script>
        //定義邊界
        var marge = {top:50, bottom:0, left:120, right:0};
    
        var svg = d3.select("svg");
        var width = svg.attr("width");
        var height = svg.attr("height");
        
        var g = svg.append("g")
            .attr("transform","translate("+marge.top+","+marge.left+")");
        
        var scale = svg.append("g")
            .attr("transform","translate("+marge.top+","+marge.left+")");
        //數(shù)據(jù)
        var dataset = {
            name:"中國",
            children:[
                {
                    name:"浙江",
                    children:[
                        {name:"杭州" ,value:100},
                        {name:"寧波",value:100},
                        {name:"溫州",value:100},
                        {name:"紹興",value:100}
                    ]
                },
                {
                    name:"廣西",
                    children:[
                        {
                            name:"桂林",
                            children:[
                                {name:"秀峰區(qū)",value:100},
                                {name:"疊彩區(qū)",value:100},
                                {name:"象山區(qū)",value:100},
                                {name:"七星區(qū)",value:100}
                            ]
                        },
                        {name:"南寧",value:100},
                        {name:"柳州",value:100},
                        {name:"防城港",value:100}
                    ]
                },
                {
                    name:"黑龍江",
                    children:[
                        {name:"哈爾濱",value:100},
                        {name:"齊齊哈爾",value:100},
                        {name:"牡丹江",value:100},
                        {name:"大慶",value:100}
                    ]
                },
                {
                    name:"新疆" , 
                    children:
                    [
                        {name:"烏魯木齊"},
                        {name:"克拉瑪依"},
                        {name:"吐魯番"},
                        {name:"哈密"}
                    ]
                }
            ]
        };
        
        //創(chuàng)建一個hierarchy layout
        var hierarchyData = d3.hierarchy(dataset)
            .sum(function(d){
                return d.value;
            });
            
        //創(chuàng)建一個樹狀圖
        var treeHeight = height-200; //*******記錄一下樹的高度，上反轉(zhuǎn)使用
        var tree = d3.tree()
            .size([width-400,treeHeight])
            .separation(function(a,b){
                return (a.parent==b.parent?1:2)/a.depth;
            })
        
        //初始化樹狀圖挑势，也就是傳入數(shù)據(jù),并得到繪制樹基本數(shù)據(jù)
        var treeData = tree(hierarchyData);
        console.log(treeData);
        //得到節(jié)點
        var nodes = treeData.descendants();
        var links = treeData.links();
        
        //輸出節(jié)點和邊
        console.log(nodes);
        console.log(links);
        
        //創(chuàng)建一個貝塞爾生成曲線生成器 // 水平：d3.linkHorizontal() 垂直：d3.linkVertical()
        var Bézier_curve_generator = d3.linkVertical()
            .x(function(d) { return d.x; }) // 水平：d.y 垂直：d.x
            .y(function(d) { return d.y; });// 水平：d.x 垂直：d.y
        //有了節(jié)點和邊集的數(shù)據(jù)后镇防，我們就可以開始繪制了，
        //繪制邊
        g.append("g")
            .selectAll("path")
            .data(links)
            .enter()
            .append("path")
            .attr("d",function(d){
                var start = {x:d.source.x,y:treeHeight - d.source.y};
                var end = {x:d.target.x,y:treeHeight - d.target.y};
                return Bézier_curve_generator({source:start,target:end});
            })
            .attr("fill","none")
            .attr("stroke","yellow")
            .attr("stroke-width",1);
            
        //繪制節(jié)點和文字
        //老規(guī)矩潮饱，先創(chuàng)建用以繪制每個節(jié)點和對應文字的分組<g>
        var gs = g.append("g")
            .selectAll("g")
            .data(nodes)
            .enter()
            .append("g")
            .attr("transform",function(d){
                var cx = treeHeight - d.y; // 水平：d.x 垂直：d.y
                var cy= d.x;  // 水平：d.y 垂直：d.x
                return "translate(" + cy + "," + cx + ")";
            });
        //繪制節(jié)點
        gs.append("circle")
            .attr("r",6)
            .attr("fill","white")
            .attr("stroke","blue")
            .attr("stroke-width",1);
            
        //文字
        gs.append("text")
            .attr("x", function(d){
                return d.children ? -15 : 0;
            })
            .attr("y", function(d) {
                return d.children ? 20 : -20 * d.data.name.length - 5;
            })
            .attr("dy",0)
            .text(function(d){
                return d.data.name;
            })
            .style('writing-mode', function(d) {
                return d.children ? 'horizontal-tb' : 'tb-rl';
            });
            
    </script>
  </body>
</html>
  1. 縱向2
image.png
<!DOCTYPE html>
<html>
  <head>
    <title>垂直直線樹(上)</title>
    
    <script type="text/javascript" src="http://d3js.org/d3.v5.min.js">
    </script>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    <svg width="1280" height="600"></svg>
    <script>
        //定義邊界
        var marge = {top:50, bottom:0, left:120, right:40};
    
        var svg = d3.select("svg");
        var width = svg.attr("width");
        var height = svg.attr("height");
        
        var g = svg.append("g")
            .attr("transform","translate("+marge.top+","+marge.left+")");
        
        var scale = svg.append("g")
            .attr("transform","translate("+marge.top+","+marge.left+")");
        //數(shù)據(jù)
        var dataset = {
            name:"中國",
            children:[
                {
                    name:"浙江",
                    children:[
                        {name:"杭州" ,value:100},
                        {name:"寧波",value:100},
                        {name:"溫州",value:100},
                        {name:"紹興",value:100}
                    ]
                },
                {
                    name:"廣西",
                    children:[
                        {
                            name:"桂林",
                            children:[
                                {name:"秀峰區(qū)",value:100},
                                {name:"疊彩區(qū)",value:100},
                                {name:"象山區(qū)",value:100},
                                {name:"七星區(qū)",value:100}
                            ]
                        },
                        {name:"南寧",value:100},
                        {name:"柳州",value:100},
                        {name:"防城港",value:100}
                    ]
                },
                {
                    name:"黑龍江",
                    children:[
                        {name:"哈爾濱",value:100},
                        {name:"齊齊哈爾",value:100},
                        {name:"牡丹江",value:100},
                        {name:"大慶",value:100}
                    ]
                },
                {
                    name:"新疆" , 
                    children:
                    [
                        {name:"烏魯木齊"},
                        {name:"克拉瑪依"},
                        {name:"吐魯番"},
                        {name:"哈密"}
                    ]
                }
            ]
        };
        
        //創(chuàng)建一個hierarchy layout
        var hierarchyData = d3.hierarchy(dataset)
            .sum(function(d){
                return d.value;
            });
        console.log(hierarchyData); 
        //創(chuàng)建一個樹狀圖
        var treeHeight = height-200; //*******記錄一下樹的高度来氧，上反轉(zhuǎn)使用
        var tree = d3.tree()
            .size([width-80,treeHeight])
            .separation(function(a,b){
                return a.parent == b.parent ? 1 : 2;
            })
        
        //初始化樹狀圖，也就是傳入數(shù)據(jù),并得到繪制樹基本數(shù)據(jù)
        var treeData = tree(hierarchyData);
        console.log(treeData);
        //得到節(jié)點
        var nodes = treeData.descendants();
        var links = treeData.links();
        
        //輸出節(jié)點和邊
        console.log(nodes);
        console.log(links);
        
        //創(chuàng)建一個貝塞爾生成曲線生成器 // 水平：d3.linkHorizontal() 垂直：d3.linkVertical()
        var Bézier_curve_generator = d3.linkVertical()
            .x(function(d) { return d.x; }) // 水平：d.y 垂直：d.x
            .y(function(d) { return d.y; });// 水平：d.x 垂直：d.y
        //有了節(jié)點和邊集的數(shù)據(jù)后香拉，我們就可以開始繪制了啦扬，
        //繪制邊
        var boxWidth = 66, boxHeight = 40;
        g.append("g")
            .selectAll("path")
            .data(links)
            .enter()
            .append("path")
            .attr("d",function(d){
                let sourceX = d.source.x,
                    sourceY = treeHeight - d.source.y + boxHeight,
                    targetX = d.target.x,
                    targetY = treeHeight - d.target.y;

                return "M" + sourceX + "," + sourceY +
                    "V" + ((targetY - sourceY) / 2 + sourceY) +
                    "H" + targetX +
                    "V" + targetY;
                /*
                var start = {x:d.source.x,y:d.source.y};
                var end = {x:d.target.x,y:d.target.y};
                return Bézier_curve_generator({source:start,target:end});
                */
            })
            .attr("fill","none")
            .attr("stroke","red")
            .attr("stroke-width",1);
              
        //繪制節(jié)點和文字
        //老規(guī)矩，先創(chuàng)建用以繪制每個節(jié)點和對應文字的分組<g>
        var gs = g.append("g")
            .selectAll("g")
            .data(nodes)
            .enter()
            .append("g")
            .attr("transform",function(d){
                var cx = treeHeight - d.y; // 水平：d.x 垂直：d.y
                var cy= d.x;  // 水平：d.y 垂直：d.x
                return "translate(" + cy + "," + cx + ")";
            });
        //繪制節(jié)點
        /*
        gs.append("circle")
            .attr("r",6)
            .attr("fill","white")
            .attr("stroke","blue")
            .attr("stroke-width",1);
        */
        gs.append("rect")
            .attr('y', 0)
            .attr('x', function (d) {
               return d.depth < 2 ? -(boxWidth / 2) : -(boxHeight / 2)
            })
            .attr('width', function (d) {
               return d.depth < 2 ? boxWidth : boxHeight;
            })
            .attr('height', function (d) {
               return d.depth < 2 ? boxHeight : boxWidth;
            })
            // 矩形背景色以及邊框顏色寬度
            .attr('fill', '#fff')
            .attr('stroke', 'steelblue')
            .attr('strokeWidth', '1px')
            .on('click', function (evt) {
               console.log(evt); // 顯示所點擊節(jié)點數(shù)據(jù)
            });
            
        //文字
        gs.append("text")
            .attr('y', function (d) {
                return d.depth < 2 ? boxHeight / 2 + 5 : 5;
            })
            .attr('style', function (d) {
                return d.depth < 2 ? '' : "writing-mode: tb;letter-spacing:0px";
            })
            .attr("text-anchor", function (d) {
                return d.depth < 2 ? 'middle' : "start";
            })
            .text(function(d){
                return d.data.name;
            });
            
    </script>
  </body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末凫碌，一起剝皮案震驚了整個濱河市扑毡，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌盛险，老刑警劉巖瞄摊，帶你破解...
    沈念sama閱讀 211,265評論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異苦掘，居然都是意外死亡换帜，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門鸟蜡，熙熙樓的掌柜王于貴愁眉苦臉地迎上來膜赃，“玉大人，你說我怎么就攤上這事揉忘√” “怎么了端铛？”我有些...
    開封第一講書人閱讀 156,852評論 0贊 347
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長疲眷。 經(jīng)常有香客問我禾蚕，道長，這世上最難降的妖魔是什么狂丝？ 我笑而不...
    開封第一講書人閱讀 56,408評論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任换淆，我火速辦了婚禮，結果婚禮上几颜，老公的妹妹穿的比我還像新娘倍试。我一直安慰自己，他們只是感情好蛋哭，可當我...
    茶點故事閱讀 65,445評論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布县习。 她就那樣靜靜地躺著，像睡著了一般谆趾。 火紅的嫁衣襯著肌膚如雪躁愿。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,772評論 1贊 290
  • 城市分裂傳說
    那天沪蓬，我揣著相機與錄音彤钟，去河邊找鬼。 笑死跷叉，一個胖子當著我的面吹牛逸雹，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播性芬，決...
    沈念sama閱讀 38,921評論 3贊 406
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼峡眶，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了植锉？” 一聲冷哼從身側響起辫樱，我...
    開封第一講書人閱讀 37,688評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎俊庇，沒想到半個月后狮暑，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 44,130評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡辉饱，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年搬男，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片彭沼。...
    茶點故事閱讀 38,617評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡缔逛，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情褐奴，我是刑警寧澤按脚，帶...
    沈念sama閱讀 34,276評論 4贊 329
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站敦冬，受9級特大地震影響辅搬，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜脖旱，卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一堪遂、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧萌庆，春花似錦溶褪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0贊 21
  • 一樁弒父案竿滨，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽佳恬。三九已至捏境，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間毁葱，已是汗流浹背垫言。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1贊 265
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留倾剿，地道東北人筷频。 一個月前我還...
    沈念sama閱讀 46,315評論 2贊 360
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像前痘，于是被迫代替她去往敵國和親凛捏。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 43,486評論 2贊 348

推薦閱讀更多精彩內(nèi)容

  • 本文基于專注于D3的呂之華前輩分享的樹狀圖畫法來寫縱向組織結構樹圖 第十五章中樹狀圖的樣式為： 我們可以進行拓展芹缔，...
    Adoins閱讀 11,894評論 2贊 9
  • 用到的組件 1坯癣、通過CocoaPods安裝 2、第三方類庫安裝 3最欠、第三方服務 友盟社會化分享組件 友盟用戶反饋 ...
    SunnyLeong閱讀 14,604評論 1贊 180
  • 今天感恩節(jié)哎示罗，感謝一直在我身邊的親朋好友。感恩相遇芝硬！感恩不離不棄蚜点。 中午開了第一次的黨會，身份的轉(zhuǎn)變要...
    迷月閃星情閱讀 10,559評論 0贊 11
  • 彩排完拌阴，天已黑
    劉凱書法閱讀 4,197評論 1贊 3
  • 表情是什么绍绘，我認為表情就是表現(xiàn)出來的情緒。表情可以傳達很多信息。高興了當然就笑了陪拘，難過就哭了实辑。兩者是相互影響密不可...
    Persistenc_6aea閱讀 124,440評論 2贊 7