attribute work:

- link line styling
- more consistent node line var names

Author: monfera

src/traces/sankey/attributes.js

@@ -102,7 +102,12 @@ module.exports = {
         },
         color: extendFlat({}, shapeAttrs.fillcolor, {
             arrayOk: true,
-            dflt: 'rgb(0,255,0,0.5)'
+            description: [
+                'Sets the `node` color. It can be a single value, or an array for specifying color for each `node`.',
+                'If `node.color` is omitted, then the default `Plotly` color palette will be cycled through',
+                'to have a variety of colors. These defaults are not fully opaque, to allow some visibility of',
+                'what is beneath the node.'
+            ].join(' ')
         }),
         line: {
             color: {
@@ -111,7 +116,7 @@ module.exports = {
                 dflt: colorAttrs.defaultLine,
                 arrayOk: true,
                 description: [
-                    'Sets the color of the line enclosing each sector.'
+                    'Sets the color of the `line` around each `node`.'
                 ].join(' ')
             },
             width: {
@@ -121,7 +126,7 @@ module.exports = {
                 dflt: 0.5,
                 arrayOk: true,
                 description: [
-                    'Sets the width (in px) of the line enclosing each sector.'
+                    'Sets the width (in px) of the `line` around each `node`.'
                 ].join(' ')
             }
         },
@@ -151,7 +156,34 @@ module.exports = {
             role: 'info',
             description: 'The shown name of the link.'
         },
-        color: extendFlat({}, shapeAttrs.fillcolor, {arrayOk: true, dflt: 'rgba(0,0,0,0.2)'}),
+        color: extendFlat({}, shapeAttrs.fillcolor, {
+            arrayOk: true,
+            description: [
+                'Sets the `link` color. It can be a single value, or an array for specifying color for each `link`.',
+                'If `link.color` is omitted, then by default, a translucent grey link will be used.'
+            ].join(' ')
+        }),
+        line: {
+            color: {
+                valType: 'color',
+                role: 'style',
+                dflt: colorAttrs.defaultLine,
+                arrayOk: true,
+                description: [
+                    'Sets the color of the `line` around each `link`.'
+                ].join(' ')
+            },
+            width: {
+                valType: 'number',
+                role: 'style',
+                min: 0,
+                dflt: 0,
+                arrayOk: true,
+                description: [
+                    'Sets the width (in px) of the `line` around each `link`.'
+                ].join(' ')
+            }
+        },
         source: {
             valType: 'data_array',
             role: 'info',

src/traces/sankey/defaults.js

@@ -57,6 +57,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('link.source');
     coerce('link.target');
     coerce('link.value');
+    coerce('link.line.color');
+    coerce('link.line.width');
 
     coerce('link.color', traceIn.link.value.map(function() {
         return tinycolor(layout.paper_bgcolor).getLuminance() < 0.333 ?

src/traces/sankey/render.js

@@ -74,8 +74,10 @@ function sankeyModel(layout, d, i) {
         horizontal = trace.orientation === 'h',
         nodePad = trace.node.pad,
         nodeThickness = trace.node.thickness,
-        nodelineColor = trace.node.line.color,
-        nodelineWidth = trace.node.line.width,
+        nodeLineColor = trace.node.line.color,
+        nodeLineWidth = trace.node.line.width,
+        linkLineColor = trace.link.line.color,
+        linkLineWidth = trace.link.line.width,
         valueFormat = trace.valueformat,
         valueSuffix = trace.valuesuffix,
         textFont = trace.textfont;
@@ -126,8 +128,10 @@ function sankeyModel(layout, d, i) {
         width: width,
         height: height,
         nodePad: nodePad,
-        nodelineColor: nodelineColor,
-        nodelineWidth: nodelineWidth,
+        nodeLineColor: nodeLineColor,
+        nodeLineWidth: nodeLineWidth,
+        linkLineColor: linkLineColor,
+        linkLineWidth: linkLineWidth,
         valueFormat: valueFormat,
         valueSuffix: valueSuffix,
         textFont: textFont,
@@ -161,6 +165,8 @@ function linkModel(uniqueKeys, d, l) {
         link: l,
         tinyColorHue: Color.tinyRGB(tc),
         tinyColorAlpha: tc.getAlpha(),
+        linkLineColor: d.linkLineColor,
+        linkLineWidth: d.linkLineWidth,
         valueFormat: d.valueFormat,
         valueSuffix: d.valueSuffix,
         sankey: d.sankey,
@@ -188,8 +194,8 @@ function nodeModel(uniqueKeys, d, n) {
         traceId: d.key,
         node: n,
         nodePad: d.nodePad,
-        nodelineColor: d.nodelineColor,
-        nodelineWidth: d.nodelineWidth,
+        nodeLineColor: d.nodeLineColor,
+        nodeLineWidth: d.nodeLineWidth,
         textFont: d.textFont,
         size: d.horizontal ? d.height : d.width,
         visibleWidth: Math.ceil(d.horizontal ? visibleThickness : visibleLength),
@@ -253,6 +259,10 @@ function sizeNode(rect) {
         .attr('height', function(d) {return d.visibleHeight;});
 }
 
+function salientEnough(d) {
+    return d.link.dy > 1 || d.linkLineWidth > 0;
+}
+
 function linksTransform(d) {
     return d.horizontal ? 'matrix(1,0,0,1,0,0)' : 'matrix(0,1,1,0,0,0)';
 }
@@ -455,9 +465,13 @@ module.exports = function(svg, styledData, layout, callbacks) {
         .call(attachPointerEvents, sankey, callbacks.linkEvents);
 
     sankeyLink
-        .style('stroke', function(d) {return d.link.dy > 1 ? 'rgba(0,0,0,0)' : d.tinyColorHue;})
-        .style('stroke-width', function(d) {return d.link.dy > 1 ? 2 : 1;})
-        .style('stroke-opacity', function(d) {return d.tinyColorAlpha;})
+        .style('stroke', function(d) {
+            return salientEnough(d) ? Color.tinyRGB(tinycolor(d.linkLineColor)) : d.tinyColorHue;
+        })
+        .style('stroke-opacity', function(d) {
+            return salientEnough(d) ? Color.opacity(d.linkLineColor) : d.tinyColorAlpha;
+        })
+        .style('stroke-width', function(d) {return salientEnough(d) ? d.linkLineWidth : 1;})
         .style('fill', function(d) {return d.tinyColorHue;})
         .style('fill-opacity', function(d) {return d.tinyColorAlpha;});
 
@@ -524,9 +538,9 @@ module.exports = function(svg, styledData, layout, callbacks) {
         .call(sizeNode);
 
     nodeRect
-        .style('stroke-width', function(d) {return d.nodelineWidth;})
-        .style('stroke', function(d) {return Color.tinyRGB(tinycolor(d.nodelineColor));})
-        .style('stroke-opacity', function(d) {return Color.opacity(d.nodelineColor);})
+        .style('stroke-width', function(d) {return d.nodeLineWidth;})
+        .style('stroke', function(d) {return Color.tinyRGB(tinycolor(d.nodeLineColor));})
+        .style('stroke-opacity', function(d) {return Color.opacity(d.nodeLineColor);})
         .style('fill', function(d) {return d.tinyColorHue;})
         .style('fill-opacity', function(d) {return d.tinyColorAlpha;});