Skip to content

Commit d748834

Browse files
committed
Adds Styling section to docs
1 parent 0ced684 commit d748834

File tree

1 file changed

+33
-0
lines changed

1 file changed

+33
-0
lines changed

README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ React D3 Tree is a [React](http://facebook.github.io/react/) component that lets
1111
- [Installation](#installation)
1212
- [Usage](#usage)
1313
- [Props](#props)
14+
- [Styling](#styling)
1415
- [External data sources](#external-data-sources)
1516

1617

@@ -87,6 +88,38 @@ class MyComponent extends Component {
8788
| `scaleExtent` | `object` | | | `{min: 0.1, max: 1}` | Sets the minimum/maximum extent to which the tree can be scaled if `props.zoomable` is true. |
8889
| `transitionDuration` | `number` | `0..n` | | `500` | Sets the animation duration (in ms) of each expansion/collapse of a tree node. <br /><br /> Set this to `0` to deactivate animations completely. |
8990

91+
92+
## Styling
93+
The tree's `styles` prop may be used to override any of the tree's default styling.
94+
The following object shape is expected by `styles`:
95+
```js
96+
{
97+
links: <svgStyleObject>,
98+
nodes: {
99+
node: {
100+
circle: <svgStyleObject>,
101+
name: <svgStyleObject>,
102+
attributes: <svgStyleObject>,
103+
},
104+
leafNode: {
105+
circle: <svgStyleObject>,
106+
name: <svgStyleObject>,
107+
attributes: <svgStyleObject>,
108+
},
109+
},
110+
}
111+
```
112+
where `<svgStyleObject>` is any object containing CSS-like properties that are compatible with an `<svg>` element's `style` attribute, for example:
113+
```js
114+
{
115+
stroke: 'blue',
116+
strokeWidth: 3,
117+
}
118+
```
119+
120+
For more information on the SVG `style` attribute, [check this out](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/style).
121+
122+
90123
## External data sources
91124
Statically hosted JSON or CSV files can be used as data sources via the additional `treeUtil` module.
92125

0 commit comments

Comments
 (0)