Indented tree layout for D3

npm install d3-indent
1 downloads in the last week
15 downloads in the last month


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


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}]



Jeremy Stucki, Interactive Things


BSD, see LICENSE.txt

npm loves you