D3 Examples - org chart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
    }
    
  </style>
</head>
​
<body>
  <script>
    
    
   var  treeData = {
     'name':'Nuwan',
     'children':[
       {
         'name':'Tharindu',
         'children':[
           {
             'name':'Kasun',
             'children':[
               {'name':'Chaturika',}
             ]
           },
           {
             'name':'Nimash'
           },
           {
             'name':'darshaka'
           }
         ]
       },
       {
         'name':'Sanduni',
         'children':[
           {
             'name':'Nadeesha'
           },
           {
             'name':'Rithu'
           }
         ]
       }
     ]
    
   };
    
    var width  = 960,
        height = 500,
            nodeW  = 150,
        nodeH  = 80,
        spaceX = 50,
        spaceY = 100;
       
    var treemap = d3.tree()
    .nodeSize([nodeW + spaceX,nodeH + spaceY]);
    
    var nodes = d3.hierarchy(treeData);
    
    nodes = treemap(nodes);
    nodes.x0 = 0;
        nodes.y0 = 0;
    
    //nodes.children.forEach(collapse)
    
            
     var svg = d3.select("body").append("svg")
              .attr("width", 960)
              .attr("height", 500)
              .call(d3.zoom().scaleExtent([1/2, 1])
              .on("zoom", zoomed)),
                g = svg.append('g')
                        .attr('transform','translate(400,50)');
    
    update(nodes);
    
    function update(nodes){
      console.log(nodes)
    var links = g.selectAll('.link')
    .data(treemap(nodes).links())
    .enter()
    .append('path')
    .attr('class','link')
    .attr("d", d3.linkVertical()
          .x(function(d) { return d.x; })
          .y(function(d) { return d.y; }));
    
    
    var node = g.selectAll('.node')
    .data(nodes.descendants())
    .enter().append('g')
    .attr('class','node')
    .attr('transform',function(d){
      return "translate("+(d.x - nodeW/2) +","+(d.y - nodeH/2)+")";
    })
    .on('click',onClick);
      
       var nodeExit = node.exit().transition()
      .duration(750)
        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x +                ")"; })
       .remove();
    
    node.append('rect')
    .attr('width',nodeW)
    .attr('height',nodeH)
    .attr('x',0)
    .attr('y',0)
    }
    
    
    function collapse(d){
      if(d.children){
        d.children = d.children;
        d.children.forEach(collapse)
        d.children = null;
      }
    }
    
    
       
    function zoomed(){
         svg.attr("transform", d3.event.transform);
      ///svg.attr("transform", "translate(" + d3.event.translate + ")" );
    }
    
    function onClick(d){
     
     if (d.children) {
        d._children = d.children;
        d.children = null;
        
      } else {
        d.children = d._children;
        d._children = null;
      }
      
      update(d);
    }
​
    
  </script>
</body>
​
    