From 1f30d693e8b46edc8947dca37f12f7d7aa079104 Mon Sep 17 00:00:00 2001
From: Chris Maness <ChrisManess@users.noreply.github.com>
Date: Tue, 22 Dec 2015 10:48:58 -0500
Subject: [PATCH] Updated Sankey.js to use shapes for links

Updated Sankey.js to use shapes instead of paths for links. This allows you to now have starting and ending values to show growth between the nodes.
---
 sankey/sankey.js | 42 +++++++++++++++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 11 deletions(-)

diff --git a/sankey/sankey.js b/sankey/sankey.js
index abe137b..858628c 100644
--- a/sankey/sankey.js
+++ b/sankey/sankey.js
@@ -54,17 +54,25 @@ d3.sankey = function() {
     var curvature = .5;
 
     function link(d) {
+
       var x0 = d.source.x + d.source.dx,
           x1 = d.target.x,
           xi = d3.interpolateNumber(x0, x1),
           x2 = xi(curvature),
           x3 = xi(1 - curvature),
-          y0 = d.source.y + d.sy + d.dy / 2,
-          y1 = d.target.y + d.ty + d.dy / 2;
-      return "M" + x0 + "," + y0
-           + "C" + x2 + "," + y0
-           + " " + x3 + "," + y1
-           + " " + x1 + "," + y1;
+          y0 = d.source.y + d.sy,
+          ytr = d.target.y + d.ety,
+          ybr = ytr + d.edy,
+          ybl = y0 + d.dy;
+      return "M" + x0 + "," + y0  //top left corner
+           + "C" + x2 + "," + y0  //top left curve
+           + " " + x3 + "," + ytr //top right curve
+           + " " + x1 + "," + ytr //Top right corner
+           + "L" + x1 + "," + ybr //bottom right corner
+           + "C" + x3 + "," + ybr //bottom right curve
+           + " " + x2 + "," + ybl //bottom left curve
+           + " " + x0 + "," + ybl //bottom left corner
+           + "L" + x0 + "," + (y0);
     }
 
     link.curvature = function(_) {
@@ -96,10 +104,10 @@ d3.sankey = function() {
   // Compute the value (size) of each node by summing the associated links.
   function computeNodeValues() {
     nodes.forEach(function(node) {
-      node.value = Math.max(
-        d3.sum(node.sourceLinks, value),
-        d3.sum(node.targetLinks, value)
-      );
+
+      node.value = Math.max(d3.sum(node.sourceLinks, value),
+                            d3.sum(node.targetLinks, endValue),
+                            d3.sum(node.targetLinks, value));
     });
   }
 
@@ -184,6 +192,11 @@ d3.sankey = function() {
       });
 
       links.forEach(function(link) {
+        if(typeof link.endValue === "undefined"){
+          link.edy = link.value * ky;
+        } else {
+          link.edy = link.endValue * ky; //added this in to calculate the ending dy
+        }
         link.dy = link.value * ky;
       });
     }
@@ -262,12 +275,15 @@ d3.sankey = function() {
       node.targetLinks.sort(ascendingSourceDepth);
     });
     nodes.forEach(function(node) {
-      var sy = 0, ty = 0;
+      var sy = 0, ty = 0, ety = 0;
       node.sourceLinks.forEach(function(link) {
         link.sy = sy;
         sy += link.dy;
       });
       node.targetLinks.forEach(function(link) {
+        link.ety = ety;
+        ety += link.edy;
+
         link.ty = ty;
         ty += link.dy;
       });
@@ -290,5 +306,9 @@ d3.sankey = function() {
     return link.value;
   }
 
+  function endValue(link) {
+    return link.endValue;
+  }
+
   return sankey;
 };