Skip to content

Commit 8d24537

Browse files
lazToumbkrem
authored andcommitted
Add data-source-id, data-target-id on Link (#234)
* Add data-source-id, data-target-id on Link It helps finding links between nodes (i.e. on node mouseOver find the links related to this node. docs(link data attributes): adds documentation for Link data attributes test: use identity assertion (`toBe`) instead of equality (`toEqual`)
1 parent ef826e6 commit 8d24537

File tree

3 files changed

+13
-1
lines changed

3 files changed

+13
-1
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ class MyComponent extends React.Component {
9191
## Props
9292
| Property | Type | Options | Required? | Default | Description |
9393
|:------------------------------|:-----------------------|:---------------------------------------------------------------------------------------|:----------|:--------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
94-
| `data` | `array`<br/>`object` | | required | `undefined` | Single-element array containing the root node object (see `myTreeData` above). <br/> Passing the root node object without an array wrapping it is also possible. |
94+
| `data` | `array`<br/>`object` | | required | `undefined` | Single-element array containing the root node object (see `myTreeData` above). <br/> Passing the root node object without an array wrapping it is also possible. <br /><br /> `react-d3-tree` will automatically attach a unique `id` attribute to each node in the DOM, as well as `data-source-id` & `data-target-id` attributes to each link connecting two nodes. |
9595
| `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. |
9696
| `nodeLabelComponent` | `object` | see [Using foreignObjects](#using-foreignobjects) | | `null` | Allows using a React component as a node label; requires `allowForeignObjects` to be set. |
9797
| `onClick` | `func` | | | `undefined` | Callback function to be called when a node is clicked. <br /><br />Has the function signature `(nodeData, evt)`. The clicked node's data object is passed as first parameter, event object as second. |

src/Link/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,8 @@ export default class Link extends React.PureComponent {
110110
onClick={this.handleOnClick}
111111
onMouseOver={this.handleOnMouseOver}
112112
onMouseOut={this.handleOnMouseOut}
113+
data-source-id={this.props.linkData.source.id}
114+
data-target-id={this.props.linkData.target.id}
113115
/>
114116
);
115117
}

src/Link/tests/index.test.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,16 @@ describe('<Link />', () => {
5656
expect(renderedComponent.prop('style')).toEqual(fixture);
5757
});
5858

59+
it('binds IDs of source & target nodes to data-source-id/data-target-id', () => {
60+
linkData.source.id = 1;
61+
linkData.target.id = 2;
62+
const renderedComponent = shallow(<Link {...mockProps} />);
63+
expect(renderedComponent.find('path').prop('data-source-id')).toBe(linkData.source.id);
64+
expect(renderedComponent.find('path').prop('data-target-id')).toBe(linkData.target.id);
65+
delete linkData.source.id;
66+
delete linkData.target.id;
67+
});
68+
5969
it('calls the appropriate path func based on `props.pathFunc`', () => {
6070
const diagonalComponent = shallow(<Link {...mockProps} />);
6171
const elbowComponent = shallow(<Link {...mockProps} pathFunc="elbow" />);

0 commit comments

Comments
 (0)