D3 Examples - Spacetree

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .node circle {
        fill: #999;
        }
    .node text {
      font: 10px sans-serif;
    }
    .node--internal circle {
        fill: #555;
        }
​
        .node--internal text {
        text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
        }
    .link {
        fill: none;
        stroke: #555;
        stroke-opacity: 0.4;
        stroke-width: 1.5px;
    }
    .rect{
      fill:red;
      stroke:black;
      stroke-width:2;
      opacity:0.5
    }
}
​
​
  </style>
</head>
​
<body>
  <svg width="400" height="400"></svg>
  <script>
        var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g");
    
    var tree = d3.tree()
    .size([height, width]);
    
    var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
​
        d3.csv("data.csv", function(error, data) {
        if (error) throw error;
           
      var root = stratify(data).sort(function(a, b) {
        return (a.height - b.height) || a.id.localeCompare(b.id); 
      });
      
      function collapse(d) {
        if(d.children) {
          d._children = d.children;
          d._children.forEach(collapse);
          d.children = null;
        }
      }
      root.children.forEach(collapse);
​
      tree(root);
      
      var link = g.selectAll(".link")
      .data(root.descendants().slice(1))
        .enter().append("path")
      .attr("class", "link")
      .attr("d", function(d,i) {
            return "M" + d.x + "," + d.y
            + "C" + (d.x + d.parent.x)/2  + "," + d.y/2
            + " " + (d.x + d.parent.x)/2  + "," + (d.parent.y/2)
            + " " + d.parent.x + "," + (d.parent.y/2); 
      });
      
      
      var node = g.selectAll(".node")
      .data(root.descendants())
        .enter().append("g")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" :                " node--leaf"); })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y/2 + ")";               });
      
      
            
      node.append("rect")
        .attr('x',function(d){
                if(d.children){
                return d.children +8;                  
            }
            })
        .attr('y',function(d){return d.children -8;})
        .attr('width',50)
        .attr('height',20)
        .attr('class','rect');
      
       node.append("text")
        .attr("dy", 3)
        .attr("x", function(d) { return d.children ? -8 : 8; })
        .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
        .style('fill', 'yellow')
        .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
​
      
     
      
        });
    
  </script>
</body>
​
    