try replacing bwFactor with minBorderWidth

- add svg and gl2d mocks for comparison

Author: etpinard

src/constants/gl2d_markers.js

@@ -70,8 +70,7 @@ var symbolsWithOpenSupport = {
         unicode: '⧓'
     },
     'diamond-x': {
-        unicode: '❖',
-        bwFactor: 0.25
+        unicode: '❖'
     },
     'cross-thin': {
         unicode: '+',

src/traces/scattergl/convert.js

@@ -508,12 +508,13 @@ proto.updateFancy = function(options) {
         var colors = convertColorScale(markerOpts, markerOpacity, traceOpacity, len);
         var borderWidths = convertNumber(markerOpts.line.width, len);
         var borderColors = convertColorScale(markerOpts.line, markerOpacity, traceOpacity, len);
-        var index, symbol, symbolSpec, _colors, _borderColors, bwFactor, isOpen;
+        var index, size, symbol, symbolSpec, isOpen, _colors, _borderColors, bw, minBorderWidth;
 
         sizes = convertArray(markerSizeFunc, markerOpts.size, len);
 
         for(i = 0; i < pId; ++i) {
             index = idToIndex[i];
+
             symbol = symbols[index];
             symbolSpec = MARKER_SYMBOLS[symbol];
             isOpen = isSymbolOpen(symbol);
@@ -530,19 +531,24 @@ proto.updateFancy = function(options) {
                 _borderColors = borderColors;
             }
 
-            if(symbolSpec.bwFactor) {
-                bwFactor = symbolSpec.bwFactor;
-            } else if(symbolSpec.noBorder) {
-                bwFactor = 0.25;
-            } else if(symbolSpec.noFill) {
-                bwFactor = 0.1;
-            } else {
-                bwFactor = 0.5;
-            }
+            size = sizes[index];
+            bw = borderWidths[index];
+            minBorderWidth = 0.1 * size;
 
-            this.scatter.options.sizes[i] = 4.0 * sizes[index];
+            this.scatter.options.sizes[i] = 4.0 * size;
             this.scatter.options.glyphs[i] = symbolSpec.unicode;
-            this.scatter.options.borderWidths[i] = bwFactor * borderWidths[index];
+
+            // From https://github.com/plotly/plotly.js/pull/1781#discussion_r121820798
+            // I would think we'd do better with something like a minimum border
+            // width, as a fraction of size, that corresponds to the line width
+            // already baked into the unicode symbol, so the symbol gets no
+            // explicit border until you provide a width greater than this, and
+            // at greater widths you set a border borderWidth - minBorderWidth.
+
+            //this.scatter.options.borderWidths[i] = (bw > minBorderWidth) ? bw - minBorderWidth : 0;
+
+            // but I found better results with:
+            this.scatter.options.borderWidths[i] = (bw > minBorderWidth) ? bw - minBorderWidth : bw;
 
             if(isOpen && !symbolSpec.noBorder && !symbolSpec.noFill) {
                 fillColor(this.scatter.options.colors, transparent, i, 0);