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 = d3layout;var tree = id: "root" children: id: "child1" id: "child2";var nodes = indent; // -> [{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 = d3layout ;var tree = id: "root" children: id: "child1" id: "child2" children: id: "child21";var nodes = indent; // -> [{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: http://www.socialprogressimperative.org/data/spi
Author
Jeremy Stucki, Interactive Things
License
BSD, see LICENSE.txt