d3.layout.indent

An indented tree layout for D3, commonly used for hierarchical lists, e.g. file directories.

Usage

On top of D3's usual hierarchical layout methods sort(), children(), and value() (see D3 API documentation), d3.layout.indent implements nodeSize() and separation() to specify the x and y increment between nodes.

Per default, both x and y increment by 1:

var indent = d3.layout.indent();
var tree = {id: "root", children: [{id: "child1"}, {id: "child2"}]};
var nodes = indent.nodes(tree); // -> [{id:"root", x: 0, y: 0}, {id: "child1", x: 1, y: 1}, {id: "child2", x: 1, y: 2}]

With .nodeSize() the x and y increment can be defined. .separation() additionally defines by how much the x increment will be multiplied between the current and the previous node:

var indent = d3.layout.indent()
  .nodeSize([10, 10])
  .separation(function(a, b) { return a.children ? 2 : 1; });
var tree = {id: "root", children: [{id: "child1"}, {id: "child2", children: [{id: "child21"}]}]};
var nodes = indent.nodes(tree); // -> [{id:"root", x: 0, y: 0}, {id: "child1", x: 10, y: 10}, {id: "child2", x: 10, y: 30}, {id: "child21", x: 20, y: 40}]

Examples

• Demo: http://bl.ocks.org/herrstucki/5467720
• Social Progress Index

Author

Jeremy Stucki, Interactive Things

License

BSD, see LICENSE.txt