Merge pull request #3384 from plotly/2862-scatter3d-colorscale

Display a colorscale when scatter3d.line.showscale is set

Author: archmoj

src/components/colorbar/connect.js

@@ -41,19 +41,26 @@ module.exports = function connectColorbar(gd, cd, moduleOpts) {
 
     var trace = cd[0].trace;
     var cbId = 'cb' + trace.uid;
-    var containerName = moduleOpts.container;
-    var container = containerName ? trace[containerName] : trace;
+    moduleOpts = Array.isArray(moduleOpts) ? moduleOpts : [moduleOpts];
 
-    gd._fullLayout._infolayer.selectAll('.' + cbId).remove();
-    if(!container || !container.showscale) return;
+    for(var i = 0; i < moduleOpts.length; i++) {
+        var containerName = moduleOpts[i].container;
 
-    var cb = cd[0].t.cb = drawColorbar(gd, cbId);
+        var container = containerName ? trace[containerName] : trace;
 
-    var scl = container.reversescale ?
-        flipScale(container.colorscale) :
-        container.colorscale;
+        gd._fullLayout._infolayer.selectAll('.' + cbId).remove();
+        if(!container || !container.showscale) continue;
 
-    cb.fillgradient(scl)
-        .zrange([container[moduleOpts.min], container[moduleOpts.max]])
-        .options(container.colorbar)();
+        var cb = cd[0].t.cb = drawColorbar(gd, cbId);
+
+        var scl = container.reversescale ?
+            flipScale(container.colorscale) :
+            container.colorscale;
+
+        cb.fillgradient(scl)
+            .zrange([container[moduleOpts[i].min], container[moduleOpts[i].max]])
+            .options(container.colorbar)();
+
+        return;
+    }
 };

src/traces/scatter/line_defaults.js

@@ -18,7 +18,7 @@ module.exports = function lineDefaults(traceIn, traceOut, defaultColor, layout,
     coerce('line.color', defaultColor);
 
     if(hasColorscale(traceIn, 'line')) {
-        colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'line.', cLetter: 'c', noScale: true});
+        colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'line.', cLetter: 'c'});
     } else {
         var lineColorDflt = (isArrayOrTypedArray(markerColor) ? false : markerColor) || defaultColor;
         coerce('line.color', lineColorDflt);

src/traces/scatter3d/attributes.js

@@ -31,9 +31,6 @@ var lineAttrs = extendFlat({
         description: 'Sets the dash style of the lines.'
     }
 }, colorAttributes('line'));
-// not yet implemented
-delete lineAttrs.showscale;
-delete lineAttrs.colorbar;
 
 function makeProjectionAttr(axLetter) {
     return {

src/traces/scatter3d/index.js

@@ -14,7 +14,17 @@ Scatter3D.plot = require('./convert');
 Scatter3D.attributes = require('./attributes');
 Scatter3D.markerSymbols = require('../../constants/gl3d_markers');
 Scatter3D.supplyDefaults = require('./defaults');
-Scatter3D.colorbar = require('../scatter/marker_colorbar');
+Scatter3D.colorbar = [
+    {
+        container: 'marker',
+        min: 'cmin',
+        max: 'cmax'
+    }, {
+        container: 'line',
+        min: 'cmin',
+        max: 'cmax'
+    }
+];
 Scatter3D.calc = require('./calc');
 
 Scatter3D.moduleType = 'trace';

test/image/baselines/gl3d_scatter3d-colorscale-with-line.png

@@ -0,0 +1,21 @@
+{
+    "data": [
+        {
+            "x": [1, 2, 4, 8, 16],
+            "y": [-1, -2, -4, -8, -16],
+            "z": [0, 1, 0, 1, 0],
+            "type": "scatter3d",
+            "mode": "lines",
+            "line": {
+                "color": [0, 0.25, 0.5, 0.75, 1.0],
+                "showscale": true,
+                "width": 10
+            }
+        }
+    ],
+    "layout": {
+        "title": "Scatter3d show scale with line colors",
+        "width": 600,
+        "height": 600
+    }
+}