D3 Bracket Layout - data

This is an attempt at creating a typical bracket style layout with D3. The data is just a mockup set using winners and challengers but could be just about anything. Mid elbow connections are used to create the links and you can click on a node to collapse/expand it.

This probably isn't the best way to achieve this, but hey its a start :) and it works.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Node-Link Tree</title>
    <script src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <style type="text/css">

.node circle {
  cursor: pointer;
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
}

path.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

</style>
  </head>
  <body>
    <div id="chart"></div>
    <script type="text/javascript">

var margin = {top: 30, right: 10, bottom: 10, left: 10},
    width = 960 - margin.left - margin.right,
    halfWidth = width / 2,
    height = 500 - margin.top - margin.bottom,
    i = 0,
    duration = 500,
    root;

var tree = d3.layout.tree()
    .size([height, width])
    ;

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });
var elbow = function (d, i){
      var source = calcLeft(d.source);
      var target = calcLeft(d.target);
      var hy = (target.y-source.y)/2;
      if(d.isRight) hy = -hy;
      return "M" + source.y + "," + source.x
             + "H" + (source.y+hy)
             + "V" + target.x + "H" + target.y;
    };
var connector = elbow;

var calcLeft = function(d){
  var l = d.y;
  if(!d.isRight){
    l = d.y-halfWidth;
    l = halfWidth - l;
  }
  return {x : d.x, y : l};
};

var vis = d3.select("#chart").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 + ")");

d3.json("bracket.json", function(json) {
  root = json;
  root.x0 = height / 2;
  root.y0 = width / 2;
  
  var t1 = d3.layout.tree().size([height, halfWidth]).children(function(d){return d.winners;}),
      t2 = d3.layout.tree().size([height, halfWidth]).children(function(d){return d.challengers;});
  t1.nodes(root);
  t2.nodes(root);
  
  var rebuildChildren = function(node){
    node.children = getChildren(node);
    if(node.children) node.children.forEach(rebuildChildren);
  }
  rebuildChildren(root);
  root.isRight = false;
  update(root);
});

var toArray = function(item, arr){
  arr = arr || [];
  var i = 0, l = item.children?item.children.length:0;
  arr.push(item);
  for(; i < l; i++){
    toArray(item.children[i], arr);
  }
  return arr;
};

function update(source) {
  // Compute the new tree layout.
  var nodes = toArray(source);

// Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180 + halfWidth; });

// Update the nodes…
  var node = vis.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("dy", function(d) { return d.isRight?14:-8;})
      .attr("text-anchor", "middle")
      .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) { p = calcLeft(d); return "translate(" + p.y + "," + p.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) { p = calcLeft(d.parent||source); return "translate(" + p.y + "," + p.x + ")"; })
      .remove();

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

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

// Update the links...
  var link = vis.selectAll("path.link")
      .data(tree.links(nodes), 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 connector({source: o, target: o});
      });

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

// Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = calcLeft(d.source||source);
        if(d.source.isRight) o.y -= halfWidth - (d.target.y - d.source.y);
        else o.y += halfWidth - (d.target.y - d.source.y);
        return connector({source: o, target: o});
      })
      .remove();

// Stash the old positions for transition.
  nodes.forEach(function(d) {
    var p = calcLeft(d);
    d.x0 = p.x;
    d.y0 = p.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(source);
  }
}

</script>
  </body>
</html>

Modified http://mbostock.github.com/d3/d3.v2.js to a secure url

https://mbostock.github.com/d3/d3.v2.js