Sample 4 (Collapsible Force Layout w/ json file)

This example demonstrates how to create a force layout of a hierarchy whose internal nodes are collapsible. Leaf nodes are shown in orange, while internal nodes (packages) are shown in blue. Clicking on an internal node (without dragging) causes that node to expand or collapse, toggling the visibility of its descendant nodes.

forked from mbostock's block: Sample 4 (Collapsible Force Layout)

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node circle {
  cursor: pointer;
  stroke: #3182bd;
  stroke-width: 12;
}

.node text {
  font: 14px sans-serif;
  font-weight: bold
  pointer-events: none;
  text-anchor: left;
}

line.link {
  fill: none;
  stroke: #b1e3e6;
  stroke-width: 2px;
}
button#reset {
    margin-top: 20px;
  	width: 50px;
    height: 20px;
  	float: right;
}
  
  
  
</style>
<body>
  <button onclick="window.location.reload()" id='reset' title='Reset Layout to Beginning'>
        <b class='fa fa-undo'>Reset</b>
    </button>
  <p align="center"><b>Sample 4</b></p>
<script src="//d3js.org/d3.v3.min.js"></script>  <script>
  
 
  
  
var width = 1216,
    height = 900,
    root;

var force = d3.layout.force()
    .linkDistance(50)
    .charge(-600)
    .gravity(0.05)
    .size([width, height])
    .on("tick", tick);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
  
var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");

//------
function myFunction() {
    document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
//-----
d3.json("Sample4.json", function(error, json) {
  if (error) throw error;

root = json;
  update();
});
  
function update() {
  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);

// Restart the force layout.
  force
      .nodes(nodes)
      .links(links)
      .start();

// Update links.
  link = link.data(links, function(d) { return d.target.id; });

link.exit().remove();

link.enter().insert("line", ".node")
      .attr("class", "link");

// Update nodes.
  node = node.data(nodes, function(d) { return d.id; });

node.exit().remove();

var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .on("click", click)
      .call(force.drag);

nodeEnter.append("circle")
      .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; });

nodeEnter.append("text")
      .attr("dy", ".35em")
  		.attr("dx", "1em")
      .text(function(d) { return d.name; });

node.select("circle")
      .style("fill", color);
}
  
function tick() {
  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
  
function color(d) {
  return d._children ? "#3182bd" // collapsed package
      : d.children ? "#c6dbef" // expanded package
      : "#fd8d3c"; // leaf node
}
  
// Toggle children on click.
function click(d) {
  if (d3.event.defaultPrevented) return; // ignore drag
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update();
}
  
// Returns a list of all nodes under the root.
function flatten(root) {
  var nodes = [], i = 0;

function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    nodes.push(node);
  }

recurse(root);
  return nodes;
}

</script>

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