feat(Sankey): renamed Sankey's link property to make every coordinate…

… name meaningful
recharts · Jun 14, 2016 · 2f6d0ed · 2f6d0ed
1 parent 96f964e
commit 2f6d0ed
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 31 deletions.
diff --git a/demo/component/DemoSankeyLink.js b/demo/component/DemoSankeyLink.js
@@ -3,15 +3,15 @@ import { Tooltip, Layer } from 'recharts';
 
 class DemoSankeyLink extends Component {
   static propTypes = {
-    x0: PropTypes.number,
-    x1: PropTypes.number,
-    x2: PropTypes.number,
-    x3: PropTypes.number,
-    y0: PropTypes.number,
-    y1: PropTypes.number,
-    sy: PropTypes.number,
-    ty: PropTypes.number,
-    dy: PropTypes.number,
+    sourceX: PropTypes.number,
+    targetX: PropTypes.number,
+    sourceY: PropTypes.number,
+    targetY: PropTypes.number,
+    sourceControlX: PropTypes.number,
+    targetControlX: PropTypes.number,
+    sourceRelativeY: PropTypes.number,
+    targetRelativeY: PropTypes.number,
+    linkWidth: PropTypes.number,
     index: PropTypes.number,
   }
 
@@ -20,17 +20,27 @@ class DemoSankeyLink extends Component {
   }
 
   render() {
-    const { x0, x1, x2, x3, y0, y1, dy, index } = this.props;
+    const { sourceX, targetX,
+      sourceY, targetY,
+      sourceControlX, targetControlX,
+      sourceRelativeY, targetRelativeY,
+      linkWidth,
+      index,
+    } = this.props;
     const { fill } = this.state;
 
     return (
-      <Layer>
+      <Layer key={`CustomLink${index}`}>
         <path
           d={`
-            M${x0},${y0 + dy / 2}
-            C${x2},${y0 + dy / 2} ${x3},${y1 + dy / 2} ${x1},${y1 + dy / 2}
-            L${x1},${y1 - dy / 2}
-            C${x3},${y1 - dy / 2} ${x2},${y0 - dy / 2} ${x0},${y0 - dy / 2}
+            M${sourceX},${sourceY + linkWidth / 2}
+            C${sourceControlX},${sourceY + linkWidth / 2}
+              ${targetControlX},${targetY + linkWidth / 2}
+              ${targetX},${targetY + linkWidth / 2}
+            L${targetX},${targetY - linkWidth / 2}
+            C${targetControlX},${targetY - linkWidth / 2}
+              ${sourceControlX},${sourceY - linkWidth / 2}
+              ${sourceX},${sourceY - linkWidth / 2}
             Z
           `}
           fill={fill}

diff --git a/demo/component/DemoSankeyNode.js b/demo/component/DemoSankeyNode.js
@@ -4,7 +4,7 @@ import { Rectangle, Layer } from 'recharts';
 function DemoSankeyNode({ x, y, width, height, index, node, containerWidth}) {
   const isOut = x + width + 6 > containerWidth;
   return (
-    <Layer>
+    <Layer key={`CustomNode${index}`}>
       <Rectangle
         x={x} y={y} width={width} height={height}
         fill="#5192ca" fillOpacity="1"

diff --git a/demo/component/Sankey.js b/demo/component/Sankey.js
@@ -148,7 +148,7 @@ function SankeyDemo() {
     <div className="sankey-charts">
       <div>
         <Sankey width={960} height={500} data={data0}>
-          <Tooltip />
+          {/* <Tooltip /> */}
         </Sankey>
       </div>
       <br />

diff --git a/src/chart/Sankey.js b/src/chart/Sankey.js
@@ -342,20 +342,26 @@ class Sankey extends Component {
       <Layer>
         {
           links.map((link, i) => {
-            const x0 = link.source.x + link.source.dx;
-            const x1 = link.target.x;
-            const xi = number(x0, x1);
-            const x2 = xi(linkCurvature);
-            const x3 = xi(1 - linkCurvature);
-            const y0 = link.source.y + link.sy + link.dy / 2;
-            const y1 = link.target.y + link.ty + link.dy / 2;
-            const { sy, ty, dy } = link;
+            const { sy: sourceRelativeY, ty: targetRelativeY, dy: linkWidth } = link;
+
+            const sourceX = link.source.x + link.source.dx;
+            const targetX = link.target.x;
+
+            const interpolationFunc = number(sourceX, targetX);
+            const sourceControlX = interpolationFunc(linkCurvature);
+            const targetControlX = interpolationFunc(1 - linkCurvature);
+
+            const sourceY = link.source.y + sourceRelativeY + linkWidth / 2;
+            const targetY = link.target.y + targetRelativeY + linkWidth / 2;
+
 
             const linkProps = {
-              x0, x1, x2, x3, y0, y1,
-              sy, ty, dy,
+              sourceX, targetX,
+              sourceY, targetY,
+              sourceControlX, targetControlX,
+              sourceRelativeY, targetRelativeY,
+              linkWidth,
               index: i,
-              key: `link${i}`,
               link,
             };
 
@@ -367,16 +373,19 @@ class Sankey extends Component {
 
             return (
               <Layer
+                key={`link${i}`}
                 onMouseLeave={this.handleMouseLeave}
                 onMouseEnter={this.handleMouseEnter}
               >
                 <path
                   className="recharts-sankey-link"
-                  key={`link${i}`}
-                  d={`M${x0},${y0}C${x2},${y0} ${x3},${y1} ${x1},${y1}`}
+                  d={`
+                    M${sourceX},${sourceY}
+                    C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}
+                  `}
                   fill="none"
                   stroke="#333"
-                  strokeWidth={link.dy}
+                  strokeWidth={linkWidth}
                   strokeOpacity="0.2"
                 />
               </Layer>