diff --git a/README.md b/README.md
index 03b67f7a..2ab6e900 100644
--- a/README.md
+++ b/README.md
@@ -89,33 +89,33 @@ class MyComponent extends React.Component {
## Props
-| Property | Type | Options | Required? | Default | Description |
-|:------------------------------|:-----------------------|:---------------------------------------------------------------------------------------|:----------|:--------------------------------------------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `data` | `array`
`object` | | required | `undefined` | Single-element array containing the root node object (see `myTreeData` above).
Passing the root node object without an array wrapping it is also possible. |
-| `nodeSvgShape` | `object` | see [Node shapes](#node-shapes) | | `{shape: 'circle', shapeProps: {r: 10}}` | Sets a specific SVG shape element + shapeProps to be used for each node. |
-| `nodeLabelComponent` | `object` | see [Using foreignObjects](#using-foreignobjects) | | `null` | Allows using a React component as a node label; requires `allowForeignObjects` to be set. |
-| `onClick` | `func` | | | `undefined` | Callback function to be called when a node is clicked.
Has the function signature `(nodeData, evt)`. The clicked node's data object is passed as first parameter, event object as second. |
-| `onMouseOver` | `func` | | | `undefined` | Callback function to be called when mouse enters the space belonging to a node.
Has the function signature `(nodeData, evt)`. The clicked node's data object is passed as first parameter, event object as second. |
-| `onMouseOut` | `func` | | | `undefined` | Callback function to be called when mouse leaves the space belonging to a node.
Has the function signature `(nodeData, evt)`. The clicked node's data object is passed as first parameter, event object as second. |
-| `onUpdate` | `func` | | | `undefined` | Callback function to be called when the inner D3 component updates. That is - on every zoom or translate event, or when tree branches are toggled. The node's data object, as well as zoom level and coordinates are passed to the callback. |
-| `orientation` | `string` (enum) | `horizontal` `vertical` | | `horizontal` | `horizontal` - Tree expands left-to-right.
`vertical` - Tree expands top-to-bottom. |
-| `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). |
-| `pathFunc` | `string (enum)`/`func` | `diagonal`
`elbow`
`straight`
`customFunc(linkData, orientation)` | | `diagonal` | `diagonal` - Smooth, curved edges between parent-child nodes.
`elbow` - Sharp edges at right angles between parent-child nodes.
`straight` - Straight lines between parent-child nodes.
`customFunc` - Custom draw function that accepts `linkData` as its first param and `orientation` as its second. |
-| `collapsible` | `bool` | | | `true` | Toggles ability to collapse/expand the tree's nodes by clicking them. |
-| `useCollapseData` | `bool` | see [Pre-defining a node's `_collapsed` state](#pre-defining-a-nodes-_collapsed-state) | | `false` | Toggles whether the tree should automatically use any `_collapsed: bool` properties it finds on nodes in the passed data set to configure its initial layout. |
-| `shouldCollapseNeighborNodes` | `bool` | | | `false` | If a node is currently being expanded, all other nodes at the same depth will be collapsed. |
-| `initialDepth` | `number` | `0..n` | | `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. |
-| `depthFactor` | `number` | `-n..0..n` | | `undefined` | Ensures the tree takes up a fixed amount of space (`node.y = node.depth * depthFactor`), regardless of tree depth.
**TIP**: Negative values invert the tree's direction. |
-| `zoomable` | `bool` | | | `true` | Toggles ability to zoom in/out on the Tree by scaling it according to `props.scaleExtent`. |
-| `zoom` | `number` | `0..n` | | `1` | A floating point number to set the initial zoom level. It is constrained by `props.scaleExtent`. `1` is the default "non-zoomed" level. |
-| `scaleExtent` | `object` | `{min: 0..n, max: 0..n}` | | `{min: 0.1, max: 1}` | Sets the minimum/maximum extent to which the tree can be scaled if `props.zoomable` is true. |
-| `nodeSize` | `object` | `{x: 0..n, y: 0..n}` | | `{x: 140, y: 140}` | Sets a fixed size for each node.
This does not affect node circle sizes, circle sizes are handled by the `circleRadius` prop. |
-| `separation` | `object` | `{siblings: 0..n, nonSiblings: 0..n}` | | `{siblings: 1, nonSiblings: 2}` | Sets separation between neighbouring nodes, differentiating between siblings (same parent) and non-siblings. |
-| `transitionDuration` | `number` | `0..n` | | `500` | Sets the animation duration (in ms) of each expansion/collapse of a tree node.
Set this to `0` to deactivate animations completely. |
-| `textLayout` | `object` | `{textAnchor: enum, x: -n..0..n, y: -n..0..n, transform: string}` | | `{textAnchor: "start", x: 10, y: -10, transform: undefined }` | Configures the positioning of each node's text (name & attributes) relative to the node itself.
`textAnchor` enums mirror the [`text-anchor` spec](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor).
`x` & `y` accept integers denoting `px` values.
`transform` mirrors the [svg `transform` spec](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform). |
-| `styles` | `object` | see [Styling](#styling) | | `Node`/`Link` CSS files | Overrides and/or enhances the tree's default styling. |
-| `allowForeignObjects` | `bool` | see [Using foreignObjects](#using-foreignobjects) | | `false` | Allows use of partially supported `` elements. |
-| `circleRadius` (legacy) | `number` | `0..n` | | `undefined` | Sets the radius of each node's `` element.
**Will be deprecated in v2, please use `nodeSvgShape` instead.** |
+| Property | Type | Options | Required? | Default | Description |
+|:------------------------------|:-----------------------|:---------------------------------------------------------------------------------------|:----------|:--------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `data` | `array`
`object` | | required | `undefined` | Single-element array containing the root node object (see `myTreeData` above).
Passing the root node object without an array wrapping it is also possible. |
+| `nodeSvgShape` | `object` | see [Node shapes](#node-shapes) | | `{shape: 'circle', shapeProps: {r: 10}}` | Sets a specific SVG shape element + shapeProps to be used for each node. |
+| `nodeLabelComponent` | `object` | see [Using foreignObjects](#using-foreignobjects) | | `null` | Allows using a React component as a node label; requires `allowForeignObjects` to be set. |
+| `onClick` | `func` | | | `undefined` | Callback function to be called when a node is clicked.
Has the function signature `(nodeData, evt)`. The clicked node's data object is passed as first parameter, event object as second. |
+| `onMouseOver` | `func` | | | `undefined` | Callback function to be called when mouse enters the space belonging to a node.
Has the function signature `(nodeData, evt)`. The clicked node's data object is passed as first parameter, event object as second. |
+| `onMouseOut` | `func` | | | `undefined` | Callback function to be called when mouse leaves the space belonging to a node.
Has the function signature `(nodeData, evt)`. The clicked node's data object is passed as first parameter, event object as second. |
+| `onUpdate` | `func` | | | `undefined` | Callback function to be called when the inner D3 component updates. That is - on every zoom or translate event, or when tree branches are toggled. The node's data object, as well as zoom level and coordinates are passed to the callback. |
+| `orientation` | `string` (enum) | `horizontal` `vertical` | | `horizontal` | `horizontal` - Tree expands left-to-right.
`vertical` - Tree expands top-to-bottom. |
+| `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). |
+| `pathFunc` | `string (enum)`/`func` | `diagonal`
`elbow`
`straight`
`customFunc(linkData, orientation)` | | `diagonal` | `diagonal` - Smooth, curved edges between parent-child nodes.
`elbow` - Sharp edges at right angles between parent-child nodes.
`straight` - Straight lines between parent-child nodes.
`customFunc` - Custom draw function that accepts `linkData` as its first param and `orientation` as its second. |
+| `collapsible` | `bool` | | | `true` | Toggles ability to collapse/expand the tree's nodes by clicking them. |
+| `useCollapseData` | `bool` | see [Pre-defining a node's `_collapsed` state](#pre-defining-a-nodes-_collapsed-state) | | `false` | Toggles whether the tree should automatically use any `_collapsed: bool` properties it finds on nodes in the passed data set to configure its initial layout. |
+| `shouldCollapseNeighborNodes` | `bool` | | | `false` | If a node is currently being expanded, all other nodes at the same depth will be collapsed. |
+| `initialDepth` | `number` | `0..n` | | `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. |
+| `depthFactor` | `number` | `-n..0..n` | | `undefined` | Ensures the tree takes up a fixed amount of space (`node.y = node.depth * depthFactor`), regardless of tree depth.
**TIP**: Negative values invert the tree's direction. |
+| `zoomable` | `bool` | | | `true` | Toggles ability to zoom in/out on the Tree by scaling it according to `props.scaleExtent`. |
+| `zoom` | `number` | `0..n` | | `1` | A floating point number to set the initial zoom level. It is constrained by `props.scaleExtent`. `1` is the default "non-zoomed" level. |
+| `scaleExtent` | `object` | `{min: 0..n, max: 0..n}` | | `{min: 0.1, max: 1}` | Sets the minimum/maximum extent to which the tree can be scaled if `props.zoomable` is true. |
+| `nodeSize` | `object` | `{x: 0..n, y: 0..n}` | | `{x: 140, y: 140}` | Sets a fixed size for each node.
This does not affect node circle sizes, circle sizes are handled by the `circleRadius` prop. |
+| `separation` | `object` | `{siblings: 0..n, nonSiblings: 0..n}` | | `{siblings: 1, nonSiblings: 2}` | Sets separation between neighbouring nodes, differentiating between siblings (same parent) and non-siblings. |
+| `transitionDuration` | `number` | `0..n` | | `500` | Sets the animation duration (in ms) of each expansion/collapse of a tree node.
Set this to `0` to deactivate animations completely. |
+| `textLayout` | `object` | `{textAnchor: enum, x: -n..0..n, y: -n..0..n, transform: string}` | | `{textAnchor: "start", x: 10, y: -10, transform: undefined }` | Configures the positioning of each node's text (name & attributes) relative to the node itself. Defining a `textLayout` property on a node passed in `props.data` will override this global configuration for that node.
`textAnchor` enums mirror the [`text-anchor` spec](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor).
`x` & `y` accept integers denoting `px` values.
`transform` mirrors the [svg `transform` spec](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform). |
+| `styles` | `object` | see [Styling](#styling) | | `Node`/`Link` CSS files | Overrides and/or enhances the tree's default styling. |
+| `allowForeignObjects` | `bool` | see [Using foreignObjects](#using-foreignobjects) | | `false` | Allows use of partially supported `` elements. |
+| `circleRadius` (legacy) | `number` | `0..n` | | `undefined` | Sets the radius of each node's `` element.
**Will be deprecated in v2, please use `nodeSvgShape` instead.** |
## Node shapes
diff --git a/src/Tree/index.js b/src/Tree/index.js
index 4240d241..3a031494 100644
--- a/src/Tree/index.js
+++ b/src/Tree/index.js
@@ -465,7 +465,7 @@ export default class Tree extends React.Component {
onClick={this.handleNodeToggle}
onMouseOver={this.handleOnMouseOverCb}
onMouseOut={this.handleOnMouseOutCb}
- textLayout={textLayout}
+ textLayout={nodeData.textLayout || textLayout}
circleRadius={circleRadius}
subscriptions={subscriptions}
allowForeignObjects={allowForeignObjects}
diff --git a/src/Tree/tests/index.test.js b/src/Tree/tests/index.test.js
index cdf00185..a5e4b893 100644
--- a/src/Tree/tests/index.test.js
+++ b/src/Tree/tests/index.test.js
@@ -6,7 +6,7 @@ import NodeWrapper from '../NodeWrapper';
import Node from '../../Node';
import Link from '../../Link';
import Tree from '../index';
-import { mockData, mockData2 } from './mockData';
+import { mockData, mockData2, mockData3 } from './mockData';
describe('', () => {
jest.spyOn(Tree.prototype, 'generateTree');
@@ -556,4 +556,16 @@ describe('', () => {
});
});
});
+
+ describe('nodeData', () => {
+ it('applies textLayout when nodeData has it specified', () => {
+ const renderedComponent = mount();
+ expect(
+ renderedComponent
+ .find(Node)
+ .last()
+ .prop('textLayout'),
+ ).toEqual(expect.objectContaining({ textAnchor: 'middle' }));
+ });
+ });
});
diff --git a/src/Tree/tests/mockData.js b/src/Tree/tests/mockData.js
index dfcfc695..2e3c8d7f 100644
--- a/src/Tree/tests/mockData.js
+++ b/src/Tree/tests/mockData.js
@@ -48,4 +48,33 @@ const mockData2 = [
},
];
-export { mockData, mockData2 };
+const mockData3 = [
+ {
+ name: 'Top Level',
+ parent: 'null',
+ attributes: {
+ keyA: 'val A',
+ keyB: 'val B',
+ keyC: 'val C',
+ },
+ children: [
+ {
+ name: 'Level 2: A',
+ parent: 'Top Level',
+ textLayout: {
+ textAnchor: 'middle',
+ x: 10,
+ y: -10,
+ transform: undefined,
+ },
+ attributes: {
+ keyA: 'val A',
+ keyB: 'val B',
+ keyC: 'val C',
+ },
+ },
+ ],
+ },
+]
+
+export { mockData, mockData2, mockData3 };