Merge pull request #6800 from adamreeve/sankey-align

Expose the node alignment property for Sankey plots

Author: archmoj

draftlogs/6800_add.md

@@ -0,0 +1 @@
+ - Add `align` option to Sankey nodes to control horizontal alignment [[#6800](https://github.com/plotly/plotly.js/pull/6800)]

src/traces/sankey/attributes.js

@@ -164,6 +164,12 @@ var attrs = module.exports = overrideAll({
             description: 'Variables `sourceLinks` and `targetLinks` are arrays of link objects.',
             keys: ['value', 'label']
         }),
+        align: {
+            valType: 'enumerated',
+            values: ['justify', 'left', 'right', 'center'],
+            dflt: 'justify',
+            description: 'Sets the alignment method used to position the nodes along the horizontal axis.'
+        },
         description: 'The nodes of the Sankey plot.'
     },
 

src/traces/sankey/defaults.js

@@ -34,6 +34,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerceNode('hoverinfo', traceIn.hoverinfo);
     handleHoverLabelDefaults(nodeIn, nodeOut, coerceNode, hoverlabelDefault);
     coerceNode('hovertemplate');
+    coerceNode('align');
 
     var colors = layout.colorway;
 

src/traces/sankey/render.js

@@ -35,6 +35,12 @@ function sankeyModel(layout, d, traceIndex) {
     var horizontal = trace.orientation === 'h';
     var nodePad = trace.node.pad;
     var nodeThickness = trace.node.thickness;
+    var nodeAlign = {
+        justify: d3Sankey.sankeyJustify,
+        left: d3Sankey.sankeyLeft,
+        right: d3Sankey.sankeyRight,
+        center: d3Sankey.sankeyCenter
+    }[trace.node.align];
 
     var width = layout.width * (domain.x[1] - domain.x[0]);
     var height = layout.height * (domain.y[1] - domain.y[0]);
@@ -61,6 +67,7 @@ function sankeyModel(layout, d, traceIndex) {
       .nodeId(function(d) {
           return d.pointNumber;
       })
+      .nodeAlign(nodeAlign)
       .nodes(nodes)
       .links(links);
 

test/image/baselines/sankey_align_center.png

@@ -0,0 +1,26 @@
+{
+    "data": [
+        {
+            "type": "sankey",
+            "node": {
+                "label": ["0", "1", "2", "3", "4", "5"],
+                "align": "center"
+            },
+            "link": {
+                "source": [
+                    0, 1, 4, 2, 1
+                ],
+                "target": [
+                    1, 4, 5, 4, 3
+                ],
+                "value": [
+                    4, 2, 3, 1, 2
+                ]
+            }
+        }],
+    "layout": {
+        "title": {"text": "Sankey with center aligned nodes"},
+        "width": 800,
+        "height": 800
+    }
+}