Honor colorscale

Author: degzhaus

src/traces/quiver/plot.js

@@ -4,7 +4,7 @@ var d3 = require('@plotly/d3');
 
 var Lib = require('../../lib');
 var Drawing = require('../../components/drawing');
-var Colorscale = require('../../components/colorscale');
+var colorscaleStroke = require('./style').colorscaleStroke;
 
 module.exports = function plot(gd, plotinfo, cdscatter, scatterLayer, transitionOpts, makeOnCompleteCallback) {
     var join, onComplete;
@@ -179,22 +179,9 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
     var lineColor = Lib.isArrayOrTypedArray(marker.color) ? undefined : marker.color;
     Drawing.lineGroupStyle(lineSegments, markerLine.width, lineColor, markerLine.dash);
 
-    // If colorscale present, color arrows by marker.color or magnitude |(u,v)|
-    if(trace._hasColorscale) {
-        var colorFunc = Colorscale.makeColorScaleFuncFromTrace(marker);
-        lineSegments.style('stroke', function(cdi) {
-            var markerColor = marker.color;
-            var value;
-            if(Lib.isArrayOrTypedArray(markerColor) && markerColor.length > cdi.i && isFinite(markerColor[cdi.i])) {
-                value = markerColor[cdi.i];
-            } else {
-                var uVal = (trace.u && trace.u[cdi.i]) || 0;
-                var vVal = (trace.v && trace.v[cdi.i]) || 0;
-                value = Math.sqrt(uVal * uVal + vVal * vVal);
-            }
-            return colorFunc(value);
-        });
-    }
+    // If colorscale present, color arrows by marker.color or magnitude |(u,v)|.
+    // Shared with style.js so the static render and restyle stay in sync.
+    if(trace._hasColorscale) colorscaleStroke(lineSegments, trace);
 
     // Render text labels at data points
     var textGroup = d3.select(element).selectAll('g.text')

src/traces/quiver/style.js

@@ -5,8 +5,30 @@ var Lib = require('../../lib');
 
 var Drawing = require('../../components/drawing');
 var Color = require('../../components/color');
+var Colorscale = require('../../components/colorscale');
 var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
 
+// Stroke each arrow path according to the trace colorscale, using marker.color
+// when it is an array of scalar values, otherwise falling back to the vector
+// magnitude |(u, v)|. `paths` may be a multi-path selection or a single path.
+function colorscaleStroke(paths, trace) {
+    var marker = trace.marker || {};
+    var colorFunc = Colorscale.makeColorScaleFuncFromTrace(marker);
+
+    paths.style('stroke', function(cdi) {
+        var markerColor = marker.color;
+        var value;
+        if(Lib.isArrayOrTypedArray(markerColor) && markerColor.length > cdi.i && isFinite(markerColor[cdi.i])) {
+            value = markerColor[cdi.i];
+        } else {
+            var uVal = (trace.u && trace.u[cdi.i]) || 0;
+            var vVal = (trace.v && trace.v[cdi.i]) || 0;
+            value = Math.sqrt(uVal * uVal + vVal * vVal);
+        }
+        return colorFunc(value);
+    });
+}
+
 function style(gd) {
     var s = d3.select(gd).selectAll('g.trace.quiver');
 
@@ -16,8 +38,12 @@ function style(gd) {
         var markerLine = marker.line || {};
         var lineColor = Lib.isArrayOrTypedArray(marker.color) ? undefined : marker.color;
 
-        d3.select(this).selectAll('path.js-line')
-            .call(Drawing.lineGroupStyle, markerLine.width, lineColor, markerLine.dash);
+        var paths = d3.select(this).selectAll('path.js-line');
+        paths.call(Drawing.lineGroupStyle, markerLine.width, lineColor, markerLine.dash);
+
+        // colorscale strokes must be applied after lineGroupStyle, which would
+        // otherwise flatten every arrow to a single (line.color) stroke
+        if(trace._hasColorscale) colorscaleStroke(paths, trace);
     });
 }
 
@@ -26,6 +52,7 @@ function styleOnSelect(gd, cd, sel) {
     var marker = trace.marker || {};
     var markerLine = marker.line || {};
     var lineColor = Lib.isArrayOrTypedArray(marker.color) ? undefined : marker.color;
+    var hasColorscale = trace._hasColorscale;
 
     if(!sel) return;
 
@@ -39,29 +66,44 @@ function styleOnSelect(gd, cd, sel) {
             var path = d3.select(this);
 
             if(d.selected) {
-                var sc = selectedLine.color || lineColor;
                 var sw = selectedLine.width !== undefined ? selectedLine.width : markerLine.width;
-                Drawing.lineGroupStyle(path, sw, sc, markerLine.dash);
+                if(selectedLine.color) {
+                    Drawing.lineGroupStyle(path, sw, selectedLine.color, markerLine.dash);
+                } else if(hasColorscale) {
+                    Drawing.lineGroupStyle(path, sw, lineColor, markerLine.dash);
+                    colorscaleStroke(path, trace);
+                    path.style('stroke-opacity', 1);
+                } else {
+                    Drawing.lineGroupStyle(path, sw, lineColor, markerLine.dash);
+                }
             } else {
                 var uc = unselectedLine.color;
-                var uw = unselectedLine.width;
-                if(!uc) {
-                    uc = lineColor ? Color.addOpacity(lineColor, DESELECTDIM) : undefined;
+                var uw = unselectedLine.width !== undefined ? unselectedLine.width : markerLine.width;
+                if(uc) {
+                    Drawing.lineGroupStyle(path, uw, uc, markerLine.dash);
+                } else if(hasColorscale) {
+                    // keep colorscale color but dim via opacity
+                    Drawing.lineGroupStyle(path, uw, lineColor, markerLine.dash);
+                    colorscaleStroke(path, trace);
+                    path.style('stroke-opacity', DESELECTDIM);
+                } else {
+                    var dimColor = lineColor ? Color.addOpacity(lineColor, DESELECTDIM) : undefined;
+                    Drawing.lineGroupStyle(path, uw, dimColor, markerLine.dash);
                 }
-                if(uw === undefined) uw = markerLine.width;
-                Drawing.lineGroupStyle(path, uw, uc, markerLine.dash);
             }
         });
 
         Drawing.selectedTextStyle(sel.selectAll('text'), trace);
     } else {
-        sel.selectAll('path.js-line')
-            .call(Drawing.lineGroupStyle, markerLine.width, lineColor, markerLine.dash);
+        var paths = sel.selectAll('path.js-line');
+        paths.call(Drawing.lineGroupStyle, markerLine.width, lineColor, markerLine.dash);
+        if(hasColorscale) colorscaleStroke(paths, trace);
         Drawing.textPointStyle(sel.selectAll('text'), trace, gd);
     }
 }
 
 module.exports = {
     style: style,
-    styleOnSelect: styleOnSelect
+    styleOnSelect: styleOnSelect,
+    colorscaleStroke: colorscaleStroke
 };

test/image/mocks/quiver_colorscale.json

@@ -10,6 +10,7 @@
       "sizeref": 0.3,
       "anchor": "tail",
       "marker": {
+        "color": [1.41, 2.24, 3.16, 2.24, 2.83, 3.61, 3.16, 3.61, 4.24],
         "colorscale": "Viridis",
         "showscale": true,
         "colorbar": {