Add support for additional Sankey diagram orientations

README.md

@@ -100,6 +100,10 @@ For convenience, a link’s source and target may be initialized using numeric o
 * *link*.width - the link’s width (proportional to *link*.value)
 * *link*.index - the zero-based index of *link* within the array of links
 
+<a name="sankey_linkShape" href="#sankey_linkShape">#</a> <i>sankey</i>.<b>linkShape</b>() [<>](https://github.com/d3/d3-sankey/blob/master/src/sankey.js "Source")
+
+Returns a [link shape](https://github.com/d3/d3-shape#links) suitable for rendering paths between the nodes of this Sankey diagram.  This will return either a [horizontal](#sankeyLinkHorizontal) or [vertical](#sankeyLinkVertical) link shape.
+
 <a name="sankey_linkSort" href="#sankey_linkSort">#</a> <i>sankey</i>.<b>linkSort</b>([<i>sort</i>]) [<>](https://github.com/d3/d3-sankey/blob/master/src/sankey.js "Source")
 
 If *sort* is specified, sets the link sort method and returns this Sankey generator. If *sort* is not specified, returns the current link sort method, which defaults to *undefined*, indicating that vertical order of links within each node will be determined automatically by the layout. If *sort* is null, the order is fixed by the input. Otherwise, the specified *sort* function determines the order; the function is passed two links, and must return a value less than 0 if the first link should be above the second, and a value greater than 0 if the second link should be above the first, or 0 if the order is not specified.
@@ -216,23 +220,13 @@ Like [d3.sankeyLeft](#sankeyLeft), except that nodes without any outgoing links
 
 ### Links
 
-<a name="sankeyLinkHorizontal" href="#sankeyLinkHorizontal">#</a> d3.<b>sankeyLinkHorizontal</b>() [<>](https://github.com/d3/d3-sankey/blob/master/src/sankeyLinkHorizontal.js "Source")
+<a name="sankeyLinkHorizontal" href="#sankeyLinkHorizontal">#</a> d3.<b>sankeyLinkHorizontal</b>() [<>](https://github.com/d3/d3-sankey/blob/master/src/sankeyLink.js "Source")
 
-Returns a [horizontal link shape](https://github.com/d3/d3-shape/blob/master/README.md#linkHorizontal) suitable for a Sankey diagram. The [source accessor](https://github.com/d3/d3-shape/blob/master/README.md#link_source) is defined as:
+Returns a [horizontal link shape](https://github.com/d3/d3-shape/blob/master/README.md#linkHorizontal) suitable for a Sankey diagram rendered in a horizontal orientation.
 
-```js
-function source(d) {
-  return [d.source.x1, d.y0];
-}
-```
+<a name="sankeyLinkVertical" href="#sankeyLinkVertical">#</a> d3.<b>sankeyLinkVertical</b>() [<>](https://github.com/d3/d3-sankey/blob/master/src/sankeyLink.js "Source")
 
-The [target accessor](https://github.com/d3/d3-shape/blob/master/README.md#link_target) is defined as:
-
-```js
-function target(d) {
-  return [d.target.x0, d.y1];
-}
-```
+Returns a [vertical link shape](https://github.com/d3/d3-shape/blob/master/README.md#linkVertical) suitable for a Sankey diagram rendered in a vertical orientation.
 
 For example, to render the links of a Sankey diagram in SVG, you might say:
 
@@ -244,6 +238,6 @@ svg.append("g")
   .selectAll("path")
   .data(graph.links)
   .join("path")
-    .attr("d", d3.sankeyLinkHorizontal())
+    .attr("d", graph.linkShape())
     .attr("stroke-width", function(d) { return d.width; });
 ```

src/index.js

@@ -1,3 +1,4 @@
 export {default as sankey} from "./sankey.js";
 export {center as sankeyCenter, left as sankeyLeft, right as sankeyRight, justify as sankeyJustify} from "./align.js";
-export {default as sankeyLinkHorizontal} from "./sankeyLinkHorizontal.js";
+export {horizontal, vertical} from "./orientation.js";
+export {sankeyLinkHorizontal, sankeyLinkVertical} from "./sankeyLink.js";

src/orientation.js

@@ -0,0 +1,7 @@
+export function horizontal(x, y) {
+  return [x, y];
+}
+
+export function vertical(x, y) {
+  return [y, x];
+}

src/sankey.js

@@ -1,5 +1,7 @@
 import {max, min, sum} from "d3-array";
 import {justify} from "./align.js";
+import {horizontal, vertical} from "./orientation.js";
+import {sankeyLinkHorizontal, sankeyLinkVertical} from "./sankeyLink.js";
 import constant from "./constant.js";
 
 function ascendingSourceBreadth(a, b) {
@@ -51,12 +53,20 @@ function computeLinkBreadths({nodes}) {
   }
 }
 
+function orientNodes({nodes}, orientation) {
+  for (const node of nodes) {
+    [node.x0, node.y0] = orientation(node.x0, node.y0);
+    [node.x1, node.y1] = orientation(node.x1, node.y1);
+  }
+}
+
 export default function Sankey() {
   let x0 = 0, y0 = 0, x1 = 1, y1 = 1; // extent
   let dx = 24; // nodeWidth
   let dy = 8, py; // nodePadding
   let id = defaultId;
   let align = justify;
+  let orientation = horizontal;
   let sort;
   let linkSort;
   let nodes = defaultNodes;
@@ -65,15 +75,22 @@ export default function Sankey() {
 
   function sankey() {
     const graph = {nodes: nodes.apply(null, arguments), links: links.apply(null, arguments)};
+    orientExtents();
     computeNodeLinks(graph);
     computeNodeValues(graph);
     computeNodeDepths(graph);
     computeNodeHeights(graph);
     computeNodeBreadths(graph);
     computeLinkBreadths(graph);
+    orientNodes(graph, orientation);
     return graph;
   }
 
+  function orientExtents() {
+    [x0, y0] = orientation(x0, y0);
+    [x1, y1] = orientation(x1, y1);
+  }
+
   sankey.update = function(graph) {
     computeLinkBreadths(graph);
     return graph;
@@ -87,6 +104,10 @@ export default function Sankey() {
     return arguments.length ? (align = typeof _ === "function" ? _ : constant(_), sankey) : align;
   };
 
+  sankey.nodeOrientation = function(_) {
+    return arguments.length ? (orientation = _, sankey) : orientation;
+  };
+
   sankey.nodeSort = function(_) {
     return arguments.length ? (sort = _, sankey) : sort;
   };
@@ -107,6 +128,10 @@ export default function Sankey() {
     return arguments.length ? (links = typeof _ === "function" ? _ : constant(_), sankey) : links;
   };
 
+  sankey.linkShape = function() {
+    return orientation === vertical ? sankeyLinkVertical() : sankeyLinkHorizontal();
+  };
+
   sankey.linkSort = function(_) {
     return arguments.length ? (linkSort = _, sankey) : linkSort;
   };

src/sankeyLink.js

@@ -0,0 +1,29 @@
+import {linkHorizontal, linkVertical} from "d3-shape";
+
+function horizontalSource(d) {
+  return [d.source.x1, d.y0];
+}
+
+function horizontalTarget(d) {
+  return [d.target.x0, d.y1];
+}
+
+export function sankeyLinkHorizontal() {
+  return linkHorizontal()
+      .source(horizontalSource)
+      .target(horizontalTarget);
+}
+
+function verticalSource(d) {
+  return [d.y0, d.source.y1];
+}
+
+function verticalTarget(d) {
+  return [d.y1, d.target.y0];
+}
+
+export function sankeyLinkVertical() {
+  return linkVertical()
+      .source(verticalSource)
+      .target(verticalTarget);
+}