Collapsible Force Layout

by Sajeetharan Sinnathurai

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
}

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

.node text {
  font: 10px sans-serif;
  pointer-events: none;
  text-anchor: middle;
}

line.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

JavaScript

var data =

{
 name: "flare",
 children: [
  {name: "analytics", children:[{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"}]},
  {name: "analytics", children:[{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"}]},
  {name: "analytics", children:[{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"}]},
  {name: "analytics", children:[{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"}]},
  {name: "analytics", children:[{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"}]},
  {name: "analytics", children:[{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"}]},
  {name: "analytics", children:[{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"}]},
  {name: "analytics", children:[{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"},{name: "testera1"}]},

 ]
};

var width = 960,
    height = 500,
    root;

var force = d3.layout.force()
    .linkDistance(80)
    .charge(-120)
    .gravity(.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");



root = data;

function collapse(d) {
  if (d.children) {
    d._children = d.children;
    d._children.forEach(collapse);
    d.children = null;
  }
}

function collapseAll() {
  collapse(root);
  update();
}

update();
collapseAll();

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();

 ...