Tree diagram

This is a tree diagram that used data from a csv file. It has been written with d3.js v4 and is based on the simple horizontal version here

This is designed to be used as part of documenting an update to the book D3 Tips and Tricks to version 4 of d3.js.

forked from d3noob's block: Tree diagram from csv using v4

forked from anonymous's block: Tree diagram

<!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 margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 960 - margin.right - margin.left,
    height = 800 - margin.top - margin.bottom;
    
    var i = 0,duration = 750,root;
    
    var tree = d3.tree()
    .size([height, width]);
    
    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  	.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
     var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
    
		d3.csv("treeCsv.csv", function(error, data) {
      
  		if (error) throw error;
      
      root = stratify(data).sort(function(a, b) {
        return (a.height - b.height) || a.id.localeCompare(b.id); 
      });

root.x0 = height / 2;
  		root.y0 = 0;
      
      function collapse(d) {
        if(d.children) {
          d._children = d.children;
          d._children.forEach(collapse);
          d.children = null;
        }
      }
      root.children.forEach(collapse);
      update(root);
      
      });
     
    
    function update(){
      
      // Compute the new tree layout.
  		var nodes = tree.nodes(root).reverse(),
      links = tree.links(nodes);
      // Normalize for fixed-depth.
  		nodes.forEach(function(d) { d.y = d.depth * 180; });

// Update the nodes…
  		var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

// Enter any new nodes at the parent's previous position.
  		var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + ","+
        source.x0 + ")"; })
      .on("click", click);

nodeEnter.append("circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? "lightsteelblue": "#fff"; 
                                 });

nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end":
        "start"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6);

// Transition nodes to their new position.
  		var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ");"
                                     });

nodeUpdate.select("circle")
      .attr("r", 4.5)
      .style("fill", function(d) { return d._children ? "lightsteelblue" :"#fff";
                                 });
			
  		nodeUpdate.select("text")
      .style("fill-opacity", 1);

// Transition exiting nodes to the parent's new position.
  		var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," +
      	source.x + ")"; })
      .remove();

nodeExit.select("circle")
      .attr("r", 1e-6);

nodeExit.select("text")
      .style("fill-opacity", 1e-6);

// Update the links…
  		var link = svg.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });

// Enter any new links at the parent's previous position.
  		link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      });

// Transition links to their new position.
  		link.transition()
      .duration(duration)
      .attr("d", diagonal);

// Transition exiting nodes to the parent's new position.
  		link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

// Stash the old positions for transition.
  		nodes.forEach(function(d) {
    		d.x0 = d.x;
    		d.y0 = d.y;
  		});
	}

// Toggle children on click.
	function click(d) {
  	if (d.children) {
    	d._children = d.children;
      d.children = null;
  	} else {
    	d.children = d._children;
    	d._children = null;
  	}
  	update(d);
	}
      
     
    
  </script>
</body>

https://d3js.org/d3.v4.min.js