implement cliponaxis: false for scatterternary

- similar to the cartesian case, keep track of
  subplots that have 1 or more `cliponaxis: false` traces
- override setConvert's ax.isPtWithinRange
- add relative clip path def (to appropriately clip lines group)

Author: etpinard

src/plots/ternary/index.js

@@ -67,6 +67,7 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
         if(!newFullLayout[oldTernaryKey] && !!oldTernary) {
             oldTernary.plotContainer.remove();
             oldTernary.clipDef.remove();
+            oldTernary.clipDefRelative.remove();
         }
     }
 

src/plots/ternary/ternary.js

@@ -46,9 +46,19 @@ proto.init = function(fullLayout) {
 };
 
 proto.plot = function(ternaryCalcData, fullLayout) {
-    var _this = this,
-        ternaryLayout = fullLayout[_this.id],
-        graphSize = fullLayout._size;
+    var _this = this;
+    var ternaryLayout = fullLayout[_this.id];
+    var graphSize = fullLayout._size;
+
+    _this._hasClipOnAxisFalse = false;
+    for(var i = 0; i < ternaryCalcData.length; i++) {
+        var trace = ternaryCalcData[i][0].trace;
+
+        if(trace.cliponaxis === false) {
+            _this._hasClipOnAxisFalse = true;
+            break;
+        }
+    }
 
     _this.adjustLayout(ternaryLayout, graphSize);
 
@@ -66,12 +76,19 @@ proto.makeFramework = function() {
         .classed('clips', true);
 
     // clippath for this ternary subplot
-    var clipId = 'clip' + _this.layoutId + _this.id;
+    var clipId = _this.clipId = 'clip' + _this.layoutId + _this.id;
     _this.clipDef = defGroup.selectAll('#' + clipId)
         .data([0]);
     _this.clipDef.enter().append('clipPath').attr('id', clipId)
         .append('path').attr('d', 'M0,0Z');
 
+    // 'relative' clippath (i.e. no translation) for this ternary subplot
+    var clipIdRelative = _this.clipIdRelative = 'clip-relative' + _this.layoutId + _this.id;
+    _this.clipDefRelative = defGroup.selectAll('#' + clipIdRelative)
+        .data([0]);
+    _this.clipDefRelative.enter().append('clipPath').attr('id', clipIdRelative)
+        .append('path').attr('d', 'M0,0Z');
+
     // container for everything in this ternary subplot
     _this.plotContainer = _this.container.selectAll('g.' + _this.id)
         .data([0]);
@@ -120,7 +137,7 @@ proto.makeFramework = function() {
         .attr('class', function(d) { return 'grid ' + d; })
         .each(function(d) { _this.layers[d] = d3.select(this); });
 
-    _this.plotContainer.selectAll('.backplot,.frontplot,.grids')
+    _this.plotContainer.selectAll('.backplot,.grids')
         .call(Drawing.setClipUrl, clipId);
 };
 
@@ -175,6 +192,16 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
     };
     setConvert(_this.xaxis, _this.graphDiv._fullLayout);
     _this.xaxis.setScale();
+    _this.xaxis.isPtWithinRange = function(d) {
+        return (
+            d.a >= _this.aaxis.range[0] &&
+            d.a <= _this.aaxis.range[1] &&
+            d.b >= _this.baxis.range[1] &&
+            d.b <= _this.baxis.range[0] &&
+            d.c >= _this.caxis.range[1] &&
+            d.c <= _this.caxis.range[0]
+        );
+    };
 
     _this.yaxis = {
         type: 'linear',
@@ -187,6 +214,7 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
     };
     setConvert(_this.yaxis, _this.graphDiv._fullLayout);
     _this.yaxis.setScale();
+    _this.yaxis.isPtWithinRange = function() { return true; };
 
     // set up the modified axes for tick drawing
     var yDomain0 = _this.yaxis.domain[0];
@@ -257,6 +285,9 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
     _this.clipDef.select('path').attr('d', triangleClip);
     _this.layers.plotbg.select('path').attr('d', triangleClip);
 
+    var triangleClipRelative = 'M0,' + h + 'h' + w + 'l-' + (w / 2) + ',-' + h + 'Z';
+    _this.clipDefRelative.select('path').attr('d', triangleClipRelative);
+
     var plotTransform = 'translate(' + x0 + ',' + y0 + ')';
     _this.plotContainer.selectAll('.scatterlayer,.maplayer')
         .attr('transform', plotTransform);
@@ -302,6 +333,9 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
     if(!_this.graphDiv._context.staticPlot) {
         _this.initInteractions();
     }
+
+    _this.plotContainer.select('.frontplot')
+        .call(Drawing.setClipUrl, _this._hasClipOnAxisFalse ? null : _this.clipId);
 };
 
 proto.drawAxes = function(doTitles) {
@@ -589,6 +623,17 @@ proto.initInteractions = function() {
 
         _this.drawAxes(false);
         _this.plotContainer.selectAll('.crisp').classed('crisp', false);
+
+        if(_this._hasClipOnAxisFalse) {
+            var scatterPoints = _this.plotContainer
+                .select('.scatterlayer').selectAll('.points');
+
+            scatterPoints.selectAll('.point')
+                .call(Drawing.hideOutsideRangePoints, _this);
+
+            scatterPoints.selectAll('.textpoint')
+                .call(Drawing.hideOutsideRangePoints, _this);
+        }
     }
 
     function dragDone(dragged, numClicks) {

src/traces/scatterternary/attributes.js

@@ -95,6 +95,7 @@ module.exports = {
         smoothing: scatterLineAttrs.smoothing
     },
     connectgaps: scatterAttrs.connectgaps,
+    cliponaxis: scatterAttrs.cliponaxis,
     fill: extendFlat({}, scatterAttrs.fill, {
         values: ['none', 'toself', 'tonext'],
         description: [

src/traces/scatterternary/defaults.js

@@ -99,4 +99,6 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         dfltHoverOn.push('fills');
     }
     coerce('hoveron', dfltHoverOn.join('+') || 'points');
+
+    coerce('cliponaxis');
 };

src/traces/scatterternary/plot.js

@@ -22,7 +22,9 @@ module.exports = function plot(ternary, moduleCalcData) {
     var plotinfo = {
         xaxis: ternary.xaxis,
         yaxis: ternary.yaxis,
-        plot: plotContainer
+        plot: plotContainer,
+        clipId: ternary.clipIdRelative,
+        _hasClipOnAxisFalse: ternary._hasClipOnAxisFalse
     };
 
     // add ref to ternary subplot object in fullData traces