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`)

Author: lazToum

README.md

@@ -91,7 +91,7 @@ class MyComponent extends React.Component {
 ## Props
 | Property                      | Type                   | Options                                                                                | Required? | Default                                                       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 |:------------------------------|:-----------------------|:---------------------------------------------------------------------------------------|:----------|:--------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `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.                                                                                                                                                                                                                                                                                                                                                                                       |
+| `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.                                                                                                                                                                                  |
 | `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. <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

@@ -110,6 +110,8 @@ export default class Link extends React.PureComponent {
         onClick={this.handleOnClick}
         onMouseOver={this.handleOnMouseOver}
         onMouseOut={this.handleOnMouseOut}
+        data-source-id={this.props.linkData.source.id}
+        data-target-id={this.props.linkData.target.id}
       />
     );
   }

src/Link/tests/index.test.js

@@ -56,6 +56,16 @@ describe('<Link />', () => {
     expect(renderedComponent.prop('style')).toEqual(fixture);
   });
 
+  it('binds IDs of source & target nodes to data-source-id/data-target-id', () => {
+    linkData.source.id = 1;
+    linkData.target.id = 2;
+    const renderedComponent = shallow(<Link {...mockProps} />);
+    expect(renderedComponent.find('path').prop('data-source-id')).toBe(linkData.source.id);
+    expect(renderedComponent.find('path').prop('data-target-id')).toBe(linkData.target.id);
+    delete linkData.source.id;
+    delete linkData.target.id;
+  });
+
   it('calls the appropriate path func based on `props.pathFunc`', () => {
     const diagonalComponent = shallow(<Link {...mockProps} />);
     const elbowComponent = shallow(<Link {...mockProps} pathFunc="elbow" />);