extend line & fills to polar center when pts < radialaxis.range[0]

Author: etpinard

src/plots/polar/polar.js

@@ -203,10 +203,12 @@ proto.updateLayout = function(fullLayout, polarLayout) {
     var yOffset2 = _this.yOffset2 = gs.t + gs.h * (1 - yDomain2[1]);
     // circle radius in px
     var radius = _this.radius = xLength2 / dxSectorBBox;
-    // circle center position x position in px
+    // circle center position in px
     var cx = _this.cx = xOffset2 - radius * sectorBBox[0];
-    // circle center position y position in px
     var cy = _this.cy = yOffset2 + radius * sectorBBox[3];
+    // circle center in the coordinate system of plot area
+    var cxx = _this.cxx = cx - xOffset2;
+    var cyy = _this.cyy = cy - yOffset2;
 
     _this.updateRadialAxis(fullLayout, polarLayout);
     _this.updateRadialAxisTitle(fullLayout, polarLayout);
@@ -248,7 +250,7 @@ proto.updateLayout = function(fullLayout, polarLayout) {
 
     _this.clipPaths.circle.select('path')
         .attr('d', pathSectorClosed(radius, sector))
-        .attr('transform', strTranslate(cx - xOffset2, cy - yOffset2));
+        .attr('transform', strTranslate(cxx, cyy));
 
     // remove crispEdges - all the off-square angles in polar plots
     // make these counterproductive.
@@ -567,6 +569,8 @@ proto.updateMainDrag = function(fullLayout, polarLayout) {
     var radius = _this.radius;
     var cx = _this.cx;
     var cy = _this.cy;
+    var cxx = _this.cxx;
+    var cyy = _this.cyy;
     var xOffset2 = _this.xOffset2;
     var yOffset2 = _this.yOffset2;
     var sector = polarLayout.sector;
@@ -588,9 +592,6 @@ proto.updateMainDrag = function(fullLayout, polarLayout) {
     var sector0;
     // angle about circle center at drag start
     var a0;
-    // circle center in the main-drag coordinate system
-    var cxx = cx - xOffset2;
-    var cyy = cy - yOffset2;
 
     function xy2r(x, y) {
         var xx = x - cxx;

src/traces/scatter/line_points.js

@@ -60,9 +60,10 @@ module.exports = function linePoints(d, opts) {
 
     // turn one calcdata point into pixel coordinates
     function getPt(index) {
-        var x = xa.c2p(d[index].x);
-        var y = ya.c2p(d[index].y);
-        if(x === BADNUM || y === BADNUM) return false;
+        var di = d[index];
+        var x = xa.c2p(di.x);
+        var y = ya.c2p(di.y);
+        if(x === BADNUM || y === BADNUM) return di.intoCenter || false;
         return [x, y];
     }
 

src/traces/scatterpolar/plot.js

@@ -48,6 +48,10 @@ module.exports = function plot(subplot, moduleCalcData) {
                     cdi.x = rr * Math.cos(rad);
                     cdi.y = rr * Math.sin(rad);
                     continue;
+                } else {
+                    // flag for scatter/line_points.js
+                    // to extend line (and fills) into center
+                    cdi.intoCenter = [subplot.cxx, subplot.cyy];
                 }
             }
 

test/image/baselines/polar_fills.png

@@ -13,13 +13,37 @@
     "theta": [ 0, 90, 180, 270, 350, 360 ],
     "fill": "toself",
     "hoveron": "fills"
+  }, {
+    "type": "scatterpolar",
+    "mode": "lines",
+    "r": [5, 1, 2, 4, 5],
+    "theta": [0, 90, 180, 270, 0],
+    "fill": "toself",
+    "hoveron": "fills",
+    "subplot": "polar2"
   }],
   "layout": {
     "polar": {
+      "domain": {
+        "x": [0, 1],
+        "y": [0, 0.46]
+      },
       "radialaxis": {
         "range": [0, 5]
       }
     },
-    "showlegend": false
+    "polar2": {
+      "domain": {
+        "x": [0, 1],
+        "y": [0.54, 1]
+      },
+      "radialaxis": {
+        "range": [2, 5]
+      }
+    },
+    "showlegend": false,
+    "margin": {"t": 40, "b": 40},
+    "width": 500,
+    "height": 800
   }
 }