Merge pull request #112 from plotly/3d_zeroline_bug

3d zeroline modification

Author: cldougl

src/plots/gl3d/layout/convert.js

@@ -18,53 +18,53 @@ var arrayCopy1D = arrtools.copy1D;
 var AXES_NAMES = ['xaxis', 'yaxis', 'zaxis'];
 
 function AxesOptions() {
-    this.bounds         = [ [-10, -10, -10],
-                            [ 10,  10,  10] ];
-
-    this.ticks          = [ [], [], [] ];
-    this.tickEnable     = [ true, true, true ];
-    this.tickFont       = [ 'sans-serif', 'sans-serif', 'sans-serif' ];
-    this.tickSize       = [ 12, 12, 12 ];
-    this.tickAngle      = [ 0, 0, 0 ];
-    this.tickColor      = [ [0,0,0,1], [0,0,0,1], [0,0,0,1] ];
-    this.tickPad        = [ 18, 18, 18 ];
-
-    this.labels         = [ 'x', 'y', 'z' ];
-    this.labelEnable    = [ true, true, true ];
-    this.labelFont      = ['Open Sans','Open Sans','Open Sans'];
-    this.labelSize      = [ 20, 20, 20 ];
-    this.labelAngle     = [ 0, 0, 0 ];
-    this.labelColor     = [ [0,0,0,1], [0,0,0,1], [0,0,0,1] ];
-    this.labelPad       = [ 30, 30, 30 ];
-
-    this.lineEnable     = [ true, true, true ];
-    this.lineMirror     = [ false, false, false ];
-    this.lineWidth      = [ 1, 1, 1 ];
-    this.lineColor      = [ [0,0,0,1], [0,0,0,1], [0,0,0,1] ];
+    this.bounds = [ [-10, -10, -10],
+                    [ 10,  10,  10] ];
+
+    this.ticks = [ [], [], [] ];
+    this.tickEnable = [ true, true, true ];
+    this.tickFont = [ 'sans-serif', 'sans-serif', 'sans-serif' ];
+    this.tickSize = [ 12, 12, 12 ];
+    this.tickAngle = [ 0, 0, 0 ];
+    this.tickColor = [ [0,0,0,1], [0,0,0,1], [0,0,0,1] ];
+    this.tickPad = [ 18, 18, 18 ];
+
+    this.labels = [ 'x', 'y', 'z' ];
+    this.labelEnable = [ true, true, true ];
+    this.labelFont = ['Open Sans','Open Sans','Open Sans'];
+    this.labelSize = [ 20, 20, 20 ];
+    this.labelAngle = [ 0, 0, 0 ];
+    this.labelColor = [ [0,0,0,1], [0,0,0,1], [0,0,0,1] ];
+    this.labelPad = [ 30, 30, 30 ];
+
+    this.lineEnable = [ true, true, true ];
+    this.lineMirror = [ false, false, false ];
+    this.lineWidth = [ 1, 1, 1 ];
+    this.lineColor = [ [0,0,0,1], [0,0,0,1], [0,0,0,1] ];
 
     this.lineTickEnable = [ true, true, true ];
     this.lineTickMirror = [ false, false, false ];
     this.lineTickLength = [ 10, 10, 10 ];
-    this.lineTickWidth  = [ 1, 1, 1 ];
-    this.lineTickColor  = [ [0,0,0,1], [0,0,0,1], [0,0,0,1] ];
+    this.lineTickWidth = [ 1, 1, 1 ];
+    this.lineTickColor = [ [0,0,0,1], [0,0,0,1], [0,0,0,1] ];
 
-    this.gridEnable     = [ true, true, true ];
-    this.gridWidth      = [ 1, 1, 1 ];
-    this.gridColor      = [ [0,0,0,1], [0,0,0,1], [0,0,0,1] ];
+    this.gridEnable = [ true, true, true ];
+    this.gridWidth = [ 1, 1, 1 ];
+    this.gridColor = [ [0,0,0,1], [0,0,0,1], [0,0,0,1] ];
 
-    this.zeroEnable     = [ true, true, true ];
-    this.zeroLineColor  = [ [0,0,0,1], [0,0,0,1], [0,0,0,1] ];
-    this.zeroLineWidth  = [ 2, 2, 2 ];
+    this.zeroEnable = [ true, true, true ];
+    this.zeroLineColor = [ [0,0,0,1], [0,0,0,1], [0,0,0,1] ];
+    this.zeroLineWidth = [ 2, 2, 2 ];
 
     this.backgroundEnable = [ true, true, true ];
     this.backgroundColor  = [ [0.8, 0.8, 0.8, 0.5],
                               [0.8, 0.8, 0.8, 0.5],
                               [0.8, 0.8, 0.8, 0.5] ];
 
     // some default values are stored for applying model transforms
-    this._defaultTickPad         = arrayCopy1D(this.tickPad);
-    this._defaultLabelPad        = arrayCopy1D(this.labelPad);
-    this._defaultLineTickLength  = arrayCopy1D(this.lineTickLength);
+    this._defaultTickPad = arrayCopy1D(this.tickPad);
+    this._defaultLabelPad = arrayCopy1D(this.labelPad);
+    this._defaultLineTickLength = arrayCopy1D(this.lineTickLength);
 }
 
 var proto = AxesOptions.prototype;
@@ -78,27 +78,30 @@ proto.merge = function(sceneLayout) {
         opts.labels[i] = convertHTML(axes.title);
         if ('titlefont' in axes) {
             if (axes.titlefont.color)  opts.labelColor[i] = str2RgbaArray(axes.titlefont.color);
-            if (axes.titlefont.family) opts.labelFont[i]  = axes.titlefont.family;
-            if (axes.titlefont.size)   opts.labelSize[i]  = axes.titlefont.size;
+            if (axes.titlefont.family) opts.labelFont[i] = axes.titlefont.family;
+            if (axes.titlefont.size)   opts.labelSize[i] = axes.titlefont.size;
         }
 
         /////// LINES ////////
         if ('showline' in axes)  opts.lineEnable[i] = axes.showline;
-        if ('linecolor' in axes) opts.lineColor[i]  = str2RgbaArray(axes.linecolor);
-        if ('linewidth' in axes) opts.lineWidth[i]  = axes.linewidth;
+        if ('linecolor' in axes) opts.lineColor[i] = str2RgbaArray(axes.linecolor);
+        if ('linewidth' in axes) opts.lineWidth[i] = axes.linewidth;
 
         if ('showgrid' in axes)  opts.gridEnable[i] = axes.showgrid;
-        if ('gridcolor' in axes) opts.gridColor[i]  = str2RgbaArray(axes.gridcolor);
-        if ('gridwidth' in axes) opts.gridWidth[i]  = axes.gridwidth;
+        if ('gridcolor' in axes) opts.gridColor[i] = str2RgbaArray(axes.gridcolor);
+        if ('gridwidth' in axes) opts.gridWidth[i] = axes.gridwidth;
 
-        if ('zeroline' in axes)      opts.zeroEnable[i]    = axes.zeroline;
+        // Remove zeroline if axis type is log
+        // otherwise the zeroline is incorrectly drawn at 1 on log axes
+        if (axes.type === 'log') opts.zeroEnable[i] = false;
+        else if ('zeroline' in axes) opts.zeroEnable[i] = axes.zeroline;
         if ('zerolinecolor' in axes) opts.zeroLineColor[i] = str2RgbaArray(axes.zerolinecolor);
         if ('zerolinewidth' in axes) opts.zeroLineWidth[i] = axes.zerolinewidth;
 
         //////// TICKS /////////
         /// tick lines
         if ('ticks' in axes && !!axes.ticks) opts.lineTickEnable[i] = true;
-        else                                 opts.lineTickEnable[i] = false;
+        else opts.lineTickEnable[i] = false;
 
         if ('ticklen' in axes) {
             opts.lineTickLength[i] = opts._defaultLineTickLength[i] = axes.ticklen;
@@ -111,9 +114,9 @@ proto.merge = function(sceneLayout) {
         //// tick labels
         if ('showticklabels' in axes) opts.tickEnable[i] = axes.showticklabels;
         if ('tickfont' in axes) {
-            if (axes.tickfont.color)  opts.tickColor[i]  = str2RgbaArray(axes.tickfont.color);
-            if (axes.tickfont.family) opts.tickFont[i]   = axes.tickfont.family;
-            if (axes.tickfont.size)   opts.tickSize[i]   = axes.tickfont.size;
+            if (axes.tickfont.color) opts.tickColor[i] = str2RgbaArray(axes.tickfont.color);
+            if (axes.tickfont.family) opts.tickFont[i] = axes.tickfont.family;
+            if (axes.tickfont.size) opts.tickSize[i] = axes.tickfont.size;
         }
 
         if ('mirror' in axes) {
@@ -131,8 +134,8 @@ proto.merge = function(sceneLayout) {
 
         ////// grid background
         if ('showbackground' in axes && axes.showbackground !== false) {
-            opts.backgroundEnable[i]    = true;
-            opts.backgroundColor[i]     = str2RgbaArray(axes.backgroundcolor);
+            opts.backgroundEnable[i] = true;
+            opts.backgroundColor[i] = str2RgbaArray(axes.backgroundcolor);
         } else opts.backgroundEnable[i] = false;
     }
 };

src/plots/gl3d/layout/tick_marks.js

@@ -49,8 +49,8 @@ function computeTickMarks(scene) {
         if (Math.abs(axes._length) === Infinity) {
             ticks[i] = [];
         } else {
-            axes.range[0] = (glRange[i].lo + scene.dataCenter[i]) / scene.dataScale[i];
-            axes.range[1] = (glRange[i].hi + scene.dataCenter[i]) / scene.dataScale[i];
+            axes.range[0] = (glRange[i].lo) / scene.dataScale[i];
+            axes.range[1] = (glRange[i].hi) / scene.dataScale[i];
             axes._m       = 1.0 / (scene.dataScale[i] * glRange[i].pixelsPerDataUnit);
 
             if(axes.range[0] === axes.range[1]) {
@@ -69,7 +69,7 @@ function computeTickMarks(scene) {
             }
             var dataTicks = Plotly.Axes.calcTicks(axes);
             for(var j=0; j<dataTicks.length; ++j) {
-              dataTicks[j].x = dataTicks[j].x * scene.dataScale[i] - scene.dataCenter[i];
+              dataTicks[j].x = dataTicks[j].x * scene.dataScale[i];
               dataTicks[j].text = convertHTML(dataTicks[j].text);
             }
             ticks[i] = dataTicks;

src/plots/gl3d/scene.js

@@ -218,7 +218,6 @@ function Scene(options, fullLayout) {
 
     //Coordinate rescaling
     this.dataScale    = [1,1,1];
-    this.dataCenter   = [0,0,0];
 
     this.contourLevels = [ [], [], [] ];
 
@@ -334,24 +333,20 @@ proto.plot = function(sceneData, fullLayout, layout) {
       computeTraceBounds(this, data, dataBounds);
     }
     var dataScale = [1,1,1];
-    var dataCenter = [0,0,0];
     for(var j=0; j<3; ++j) {
       if(dataBounds[0][j] > dataBounds[1][j]) {
         dataScale[j] = 1.0;
-        dataCenter[j] = 0.0;
       } else {
         if(dataBounds[1][j] === dataBounds[0][j]) {
           dataScale[j] = 1.0;
         } else {
           dataScale[j] = 1.0/(dataBounds[1][j] - dataBounds[0][j]);
         }
-        dataCenter[j] = 0.5 * (dataBounds[0][j] + dataBounds[1][j]) * dataScale[j];
       }
     }
 
-    //Save scale and offset factors
+    //Save scale
     this.dataScale = dataScale;
-    this.dataCenter = dataCenter;
 
     //Update traces
     for(var i = 0; i < sceneData.length; ++i) {
@@ -422,9 +417,9 @@ trace_id_loop:
             for(j = 0; j < this.glplot.objects.length; ++j) {
                 var objBounds = this.glplot.objects[j].bounds;
                 sceneBounds[0][i] = Math.min(sceneBounds[0][i],
-                  (objBounds[0][i] + dataCenter[i]) / dataScale[i]);
+                  objBounds[0][i] / dataScale[i]);
                 sceneBounds[1][i] = Math.max(sceneBounds[1][i],
-                  (objBounds[1][i] + dataCenter[i]) / dataScale[i]);
+                  objBounds[1][i] / dataScale[i]);
             }
             if('rangemode' in axis && axis.rangemode === 'tozero') {
                 sceneBounds[0][i] = Math.min(sceneBounds[0][i], 0);
@@ -450,8 +445,8 @@ trace_id_loop:
         axisDataRange[i] = sceneBounds[1][i] - sceneBounds[0][i];
 
         //Update plot bounds
-        this.glplot.bounds[0][i] = sceneBounds[0][i] * dataScale[i] - dataCenter[i];
-        this.glplot.bounds[1][i] = sceneBounds[1][i] * dataScale[i] - dataCenter[i];
+        this.glplot.bounds[0][i] = sceneBounds[0][i] * dataScale[i];
+        this.glplot.bounds[1][i] = sceneBounds[1][i] * dataScale[i];
     }
 
     var axesScaleRatio = [1, 1, 1];

src/traces/mesh3d/convert.js

@@ -76,15 +76,15 @@ proto.update = function(data) {
     this.data = data;
 
     //Unpack position data
-    function toDataCoords(axis, coord, scale, offset) {
+    function toDataCoords(axis, coord, scale) {
       return coord.map(function(x) {
-        return axis.d2l(x) * scale - offset;
+        return axis.d2l(x) * scale;
       });
     }
     var positions = zip3(
-      toDataCoords(layout.xaxis, data.x, scene.dataScale[0], scene.dataCenter[0]),
-      toDataCoords(layout.yaxis, data.y, scene.dataScale[1], scene.dataCenter[1]),
-      toDataCoords(layout.zaxis, data.z, scene.dataScale[2], scene.dataCenter[2]));
+      toDataCoords(layout.xaxis, data.x, scene.dataScale[0]),
+      toDataCoords(layout.yaxis, data.y, scene.dataScale[1]),
+      toDataCoords(layout.zaxis, data.z, scene.dataScale[2]));
 
 
     var cells;

src/traces/scatter3d/convert.js

@@ -169,7 +169,6 @@ function convertPlotlyOptions(scene, data) {
         points = [],
         sceneLayout = scene.fullSceneLayout,
         scaleFactor = scene.dataScale,
-        offset = scene.dataCenter,
         xaxis = sceneLayout.xaxis,
         yaxis = sceneLayout.yaxis,
         zaxis = sceneLayout.zaxis,
@@ -184,9 +183,9 @@ function convertPlotlyOptions(scene, data) {
     //Convert points
     for (i = 0; i < len; i++) {
         // sanitize numbers and apply transforms based on axes.type
-        xc = xaxis.d2l(x[i]) * scaleFactor[0] - offset[0];
-        yc = yaxis.d2l(y[i]) * scaleFactor[1] - offset[1];
-        zc = zaxis.d2l(z[i]) * scaleFactor[2] - offset[2];
+        xc = xaxis.d2l(x[i]) * scaleFactor[0];
+        yc = yaxis.d2l(y[i]) * scaleFactor[1];
+        zc = zaxis.d2l(z[i]) * scaleFactor[2];
 
         points[i] = [xc, yc, zc];
     }

src/traces/surface/convert.js

@@ -52,9 +52,9 @@ proto.handlePick = function(selection) {
 
     var sceneLayout = this.scene.fullSceneLayout;
     selection.dataCoordinate = [
-      sceneLayout.xaxis.d2l(traceCoordinate[0])*this.scene.dataScale[0] - this.scene.dataCenter[0],
-      sceneLayout.yaxis.d2l(traceCoordinate[1])*this.scene.dataScale[1] - this.scene.dataCenter[1],
-      sceneLayout.zaxis.d2l(traceCoordinate[2])*this.scene.dataScale[2] - this.scene.dataCenter[2]
+      sceneLayout.xaxis.d2l(traceCoordinate[0])*this.scene.dataScale[0],
+      sceneLayout.yaxis.d2l(traceCoordinate[1])*this.scene.dataScale[1],
+      sceneLayout.zaxis.d2l(traceCoordinate[2])*this.scene.dataScale[2]
     ];
 
     var text = this.data.text;
@@ -165,7 +165,6 @@ proto.update = function(data) {
         yaxis = sceneLayout.yaxis,
         zaxis = sceneLayout.zaxis,
         scaleFactor = scene.dataScale,
-        offset = scene.dataCenter,
         xlen = z[0].length,
         ylen = z.length,
         coords = [
@@ -188,30 +187,30 @@ proto.update = function(data) {
      * which is the transpose of 'gl-surface-plot'.
      */
     fill(coords[2], function(row, col) {
-        return zaxis.d2l(z[col][row]) * scaleFactor[2]  - offset[2];
+        return zaxis.d2l(z[col][row]) * scaleFactor[2];
     });
 
     // coords x
     if (Array.isArray(x[0])) {
         fill(xc, function(row, col) {
-            return xaxis.d2l(x[col][row]) * scaleFactor[0] - offset[0];
+            return xaxis.d2l(x[col][row]) * scaleFactor[0];
         });
     } else {
         // ticks x
         fill(xc, function(row) {
-            return xaxis.d2l(x[row]) * scaleFactor[0] - offset[0];
+            return xaxis.d2l(x[row]) * scaleFactor[0];
         });
     }
 
     // coords y
     if (Array.isArray(y[0])) {
         fill(yc, function(row, col) {
-            return yaxis.d2l(y[col][row]) * scaleFactor[1] - offset[1];
+            return yaxis.d2l(y[col][row]) * scaleFactor[1];
         });
     } else {
         // ticks y
         fill(yc, function(row, col) {
-            return yaxis.d2l(y[col]) * scaleFactor[1] - offset[1];
+            return yaxis.d2l(y[col]) * scaleFactor[1];
         });
     }