Sankey sorting (#269)

* remove deprecated refs definition This old usage of defining refs via a string is deprecated and seems to break when debugging reactochart using `npm link` locally. * add Sankey Sorting Function hooks Co-authored-by: Isaac Ezer <[email protected]>
spotify · Oct 30, 2020 · ceead23 · ceead23
1 parent 17a07bd
commit ceead23
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/SankeyDiagram.js b/src/SankeyDiagram.js
@@ -546,6 +546,10 @@ export default class SankeyDiagram extends React.Component {
      * or accessor function which returns a style object.
      */
     nodeStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+    /**
+     * Node sort function
+     */
+    nodeSort: PropTypes.func,
     /**
      * Node `mouseenter` event handler, called when user's mouse enters a node.
      */
@@ -580,6 +584,10 @@ export default class SankeyDiagram extends React.Component {
      * or accessor function which returns a class (string).
      */
     linkClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    /**
+     * Link sort function
+     */
+    linkSort: PropTypes.func,
     /**
      * Inline style object to be applied to each link,
      * or accessor function which returns a style object.
@@ -992,6 +1000,8 @@ export default class SankeyDiagram extends React.Component {
       .nodeId(props.nodeId)
       .nodeWidth(props.nodeWidth)
       .nodePadding(props.nodePadding)
+      .nodeSort(props.nodeSort)
+      .linkSort(props.linkSort)
       .nodeAlign(
         nodeAlignmentsByName[props.nodeAlignment] ||
           nodeAlignmentsByName.justify,

diff --git a/src/ZoomContainer.js b/src/ZoomContainer.js
@@ -123,9 +123,14 @@ export default class ZoomContainer extends React.Component {
 
   state = { lastZoomTransform: null, selection: null };
 
+  constructor(props) {
+    super(props);
+    this.svgRef = React.createRef();
+  }
+
   componentDidMount() {
     const initialZoomTransform = zoomTransformFromProps(this.props);
-    const selection = d3.select(this.refs.svg);
+    const selection = d3.select(this.svgRef.current);
 
     this.zoom = d3.zoom();
     selection.call(this.zoom);
@@ -225,12 +230,17 @@ export default class ZoomContainer extends React.Component {
   }
 
   render() {
-    const zoomTransform = this.refs.svg
-      ? d3.zoomTransform(this.refs.svg)
-      : null;
+    const zoomTransform =
+      this.svgRef && this.svgRef.current
+        ? d3.zoomTransform(this.svgRef.current)
+        : null;
 
     return (
-      <svg ref="svg" width={this.props.width} height={this.props.height}>
+      <svg
+        ref={this.svgRef}
+        width={this.props.width}
+        height={this.props.height}
+      >
         <g
           width={this.props.width}
           height={this.props.height}