https://github.com/interactivethings/d3-indent
D3 indented tree layout.
https://github.com/interactivethings/d3-indent
Last synced: 6 months ago
JSON representation
D3 indented tree layout.
- Host: GitHub
- URL: https://github.com/interactivethings/d3-indent
- Owner: interactivethings
- License: bsd-3-clause
- Created: 2013-04-26T14:22:40.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2014-05-27T17:29:08.000Z (almost 11 years ago)
- Last Synced: 2024-11-08T16:06:25.791Z (6 months ago)
- Language: JavaScript
- Size: 165 KB
- Stars: 27
- Watchers: 7
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# d3.layout.indent
An indented tree layout for [D3](http://d3js.org), 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](https://github.com/mbostock/d3/wiki/Hierarchy-Layout)), 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:
```javascript
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:
```javascript
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](http://www.socialprogressimperative.org/data/spi#performance/regions/spi/dim1,dim2,dim3)
## Author
Jeremy Stucki, [Interactive Things](http://interactivethings.com)
## License
BSD, see LICENSE.txt