D3.js tree vertical tree view

d3.js draws a vertical tree

want to show the root node, the first layer node is horizontal, the node above the first layer wants to display vertically

related codes

the examples found online are horizontal.

/ / create a Bezier generating curve generator

    

var Bzier_curve_generator = d3.linkHorizontal()
            .x(function(d) { return d.y; })
            .y(function(d) { return d.x; });
        
         

var Bzier_curve_generator = d3.linkVertical()
            .x(function(d) { return d.x; })
            .y(function(d) { return d.y; });

but I still don"t know how to change the nodes and lines.

<!DOCTYPE html>
<html>
  <head>
    <title>testD3_chp15_1.html</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://d3js.org/d3.v5.min.js">
    </script>
    <!--<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+")");
        //
        var dataset = {
            name:"",
            children:[
                {
                    name:"",
                    children:[
                        {name:"" ,value:100},
                        {name:"",value:100},
                        {name:"",value:100},
                        {name:"",value:100}
                    ]
                },
                {
                    name:"",
                    children:[
                        {
                            name:"",
                            children:[
                                {name:"",value:100},
                                {name:"",value:100},
                                {name:"",value:100},
                                   {name:"",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:""}
                    ]
                }
            ]
        };
        
        //hierarchy layout
        var hierarchyData = d3.hierarchy(dataset)
            .sum(function(d){
                return d.value;
            });
            
        //
        var tree = d3.tree()
            .size([width-400,height-200])
            .separation(function(a,b){
                return (a.parent==b.parent?1:2)/a.depth;
            })
        
        //,
        var treeData = tree(hierarchyData);
        console.log(treeData);
        //
        var nodes = treeData.descendants();
        var links = treeData.links();
        
        //
        console.log(nodes);
        console.log(links);
        
        //
        var Bzier_curve_generator = d3.linkVertical()
            .x(function(d) { return d.x; })
            .y(function(d) { return d.y; });
            
        //
        //
        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 Bzier_curve_generator({source:start,target:end});
            })
            .attr("fill","none")
            .attr("stroke","yellow")
            .attr("stroke-width",1);
            
        //
        //<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+")";
            });
        //
        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>

d3.js draws a vertical tree

want to show the root node, the first layer node is horizontal, the node above the first layer wants to display vertically

related codes

the result I expect is