D3 indented tree layout.
JavaScript
Switch branches/tags
Nothing to show
Latest commit a68b818 May 27, 2014 @herrstucki herrstucki Update URL

README.md

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

Author

Jeremy Stucki, Interactive Things

License

BSD, see LICENSE.txt