|
1 | 1 | # React D3 Tree |
2 | 2 | [](https://travis-ci.org/bkrem/react-d3-tree) |
3 | | -[](https://coveralls.io/github/bkrem/react-d3-tree?branch=master) |
4 | | - |
5 | | -> :construction: :construction: |
6 | | -> This library is work-in-progress, meaning breaking changes/major version bumps are likely until indicated otherwise. |
| 3 | +[](https://coveralls.io/github/bkrem/react-d3-tree?branch=master) |
7 | 4 |
|
8 | 5 | React D3 Tree is a [React](http://facebook.github.io/react/) component that lets you represent hierarchical data (e.g. ancestor trees, organisational structure, package dependencies) as an animated & interactive tree graph by leveraging [D3](https://d3js.org/)'s `tree` layout. |
9 | 6 |
|
@@ -62,11 +59,13 @@ class MyComponent extends Component { |
62 | 59 | ``` |
63 | 60 |
|
64 | 61 | ## Props |
65 | | -| Property | Type | Options | Required? | Default | Description | |
66 | | -|----------------|-----------------|-------------------------|-----------|----------------|-------------------------------------------------------------------------------------------------------------------------------------------------| |
67 | | -| `data` | `array` | | required | `undefined` | Single-element array containing hierarchical object (see `myTreeData` above); contains (at least) `name` and `parent` keys. | |
68 | | -| `orientation` | `string` (enum) | `horizontal` `vertical` | | `horizontal` | `horizontal` - Tree expands left-to-right. `vertical` - Tree expands top-to-bottom | |
69 | | -| `translate` | `object` | | | `{x: 0, y: 0}` | Translates the graph along the x/y axis by the specified amount of pixels (avoids the graph being stuck in the top left canvas corner) | |
70 | | -| `pathFunc` | `string` (enum) | `diagonal` `elbow` | | `diagonal` | `diagonal` - Renders smooth, curved edges between parent-child nodes. `elbow` - Renders sharp edges at right angles between parent-child nodes | |
71 | | -| `collapsible` | `bool` | | | `true` | Sets whether the tree's nodes can be collapsed by clicking them | |
72 | | -| `initialDepth` | `number` | `0` or greater | | `undefined` | Sets the maximum node depth to which the tree is expanded on its initial render; tree renders to full depth if prop is omitted. | |
| 62 | +| Property | Type | Options | Required? | Default | Description | |
| 63 | +|----------------|-----------------|-------------------------|-----------|-------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------| |
| 64 | +| `data` | `array` | | required | `undefined` | Single-element array containing hierarchical object (see `myTreeData` above); contains (at least) `name` and `parent` keys. | |
| 65 | +| `orientation` | `string` (enum) | `horizontal` `vertical` | | `horizontal` | `horizontal` - Tree expands left-to-right. `vertical` - Tree expands top-to-bottom | |
| 66 | +| `translate` | `object` | | | `{x: 0, y: 0}` | Translates the graph along the x/y axis by the specified amount of pixels (avoids the graph being stuck in the top left canvas corner) | |
| 67 | +| `pathFunc` | `string` (enum) | `diagonal` `elbow` | | `diagonal` | `diagonal` - Renders smooth, curved edges between parent-child nodes. `elbow` - Renders sharp edges at right angles between parent-child nodes | |
| 68 | +| `collapsible` | `bool` | | | `true` | Toggles ability to collapse/expand the tree's nodes by clicking them | |
| 69 | +| `initialDepth` | `number` | `0` or greater | | `undefined` | Sets the maximum node depth to which the tree is expanded on its initial render; tree renders to full depth if prop is omitted. | |
| 70 | +| `zoomable` | `bool` | | | `true` | Toggles ability to zoom in/out on the Tree by scaling the SVG element according to `props.scaleExtent` | |
| 71 | +| `scaleExtent` | `object` | | | `{min: 0.1, max: 1}` | Sets the minimum/maximum extent to which the tree can be scaled if `props.zoomable` is true | |
0 commit comments