d3-indent

Indented tree layout for D3

npm install d3-indent
6 downloads in the last week
14 downloads in the last month

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 dx() and dy() which are used 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

npm loves you