D3 Examples - d3 inter-dependency graph

d3 inter-dependency graph

An implementation of Danny Holten's hierarchical edge bundling algorithm in D3, showing dependencies between classes in d3 functions hierarchy. Dependencies are bundled according to the parent packages. This example uses two layouts: a radial d3.layout.cluster to position the tree nodes, and d3.layout.bundle to group the dependencies into spline bundles. Thanks to Jason Davies for contributing the layout implementation!

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.node {
  font: 10px sans-serif;
}
​
.link {
  stroke: steelblue;
  stroke-opacity: 0.6;
  fill: none;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
​
var diameter = 960,
    radius = diameter / 2,
    innerRadius = radius - 120;
​
var cluster = d3.layout.cluster()
    .size([360, innerRadius])
    .sort(null)
    .value(function(d) { return d.size; });
​
var bundle = d3.layout.bundle();
​
var line = d3.svg.line.radial()
    .interpolate("bundle")
    .tension(0.55)
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x / 180 * Math.PI; });
​
var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")");
​
d3.json("readme-d3-imports.json", function(error, classes) {
​
  var nodes = cluster.nodes(packages.root(classes)),
      links = packages.imports(nodes);
​
  svg.selectAll(".link")
      .data(bundle(links))
    .enter().append("path")
      .attr("class", "link")
      .attr("d", line);
​
  svg.selectAll(".node")
      .data(nodes.filter(function(n) { return !n.children; }))
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
    .append("text")
      .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
      .text(function(d) { return d.key; });
});
​
d3.select(self.frameElement).style("height", diameter + "px");
​
var packages = {
​
  // Lazily construct the package hierarchy from class names.
  root: function(classes) {
    var map = {};
​
    function find(name, data) {
      var node = map[name], i;
      if (!node) {
        node = map[name] = data || {name: name, children: []};
        if (name.length) {
          node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
          if (!node.parent.children) {
            node.parent.children = [];
          }
          node.parent.children.push(node);
          node.key = name.substr(3);//name.substring(i + 1);
        }
      }
      return node;
    }
​
    classes.forEach(function(d) {
      find(d.name, d);
    });
​
    return map[""];
  },
​
  // Return a list of imports for the given array of nodes.
  imports: function(nodes) {
    var map = {},
        imports = [];
​
    // Compute a map from name to node.
    nodes.forEach(function(d) {
      map[d.name] = d;
    });
​
    // For each import, construct a link from the source to target node.
    nodes.forEach(function(d) {
      if (d.imports) d.imports.forEach(function(i) {
        imports.push({source: map[d.name], target: map[i]});
      });
    });
​
    return imports;
  }
};
​
</script>
​
    