Draggable Cluster Dendrogram

The code here was copied directly from Mike Bostock's Cluster Dendrogram example, with a small addition of the dragging functionality. Any node can be dragged around and its children will come along for the ride with it. The trick is just to make sure that the entire subtree remains intact by moving all of the relevant nodes by the same offset.

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

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

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

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

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 2200;

var link,
    node;

var cluster = d3.layout.cluster()
    .size([height, width - 160]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

var vis = svg.append("g")
    .attr("transform", "translate(40,0)");

d3.json("flare.json", function(error, root) {
  var nodes = cluster.nodes(root),
      links = cluster.links(nodes);

link = vis.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

node = vis.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
      .on("mousedown", drag);

node.append("circle")
      .attr("r", 4.5);

node.append("text")
      .attr("dx", function(d) { return d.children ? -8 : 8; })
      .attr("dy", 3)
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { return d.name; });
});

function move(root, xOffset, yOffset) {
  root.x += yOffset;
  root.y += xOffset;
  if (root.children) {
    root.children.forEach(function(d) { move(d, xOffset, yOffset); });
  }
}

d3.select(self.frameElement).style("height", height + "px");

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

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