Add support for dashed marker lines in scatter plots

draftlogs/7673_add.md

@@ -0,0 +1 @@
+ - Add support for dashed marker lines in scatter plots [[#7673](https://github.com/plotly/plotly.js/pull/7673)]

src/components/drawing/index.js

@@ -975,6 +975,9 @@ drawing.singlePointStyle = function (d, sel, trace, fns, gd, pt) {
     } else {
         sel.style('stroke-width', (d.isBlank ? 0 : lineWidth) + 'px');
 
+        const lineDash = d.mld || (markerLine || {}).dash;
+        if(lineDash) drawing.dashLine(sel, lineDash, lineWidth);
+
         var markerGradient = marker.gradient;
 
         var gradientType = d.mgt;

src/components/legend/style.js

@@ -221,6 +221,7 @@ module.exports = function style(s, gd, legend) {
                 dEdit.mo = boundVal('marker.opacity', Lib.mean, [0.2, 1]);
                 dEdit.mlc = boundVal('marker.line.color', pickFirst);
                 dEdit.mlw = boundVal('marker.line.width', Lib.mean, [0, 5], CST_MARKER_LINE_WIDTH);
+                dEdit.mld = boundVal('marker.line.dash', pickFirst);
                 tEdit.marker = {
                     sizeref: 1,
                     sizemin: 1,

src/traces/scatter/arrays_to_calcdata.js

@@ -38,6 +38,7 @@ module.exports = function arraysToCalcdata(cd, trace) {
         if(marker.line) {
             Lib.mergeArray(markerLine.color, cd, 'mlc');
             Lib.mergeArrayCastPositive(markerLine.width, cd, 'mlw');
+            Lib.mergeArray(markerLine.dash, cd, 'mld');
         }
 
         var markerGradient = marker.gradient;

src/traces/scatter/attributes.js

@@ -555,6 +555,9 @@ module.exports = {
                         anim: true,
                         description: 'Sets the width (in px) of the lines bounding the marker points.'
                     },
+                    dash: extendFlat({}, dash, {
+                        arrayOk: true
+                    }),
                     editType: 'calc'
                 },
                 colorScaleAttrs('marker.line', { anim: true })

src/traces/scatter/marker_defaults.js

@@ -64,6 +64,7 @@ module.exports = function markerDefaults(traceIn, traceOut, defaultColor, layout
         }
 
         coerce('marker.line.width', isBubble ? 1 : 0);
+        coerce('marker.line.dash');
     }
 
     if(isBubble) {

src/traces/scattercarpet/attributes.js

@@ -97,6 +97,7 @@ module.exports = {
             line: extendFlat(
                 {
                     width: scatterMarkerLineAttrs.width,
+                    dash: scatterMarkerLineAttrs.dash,
                     editType: 'calc'
                 },
                 colorScaleAttrs('marker.line')

src/traces/scattergeo/attributes.js

@@ -139,7 +139,8 @@ module.exports = overrideAll(
                 colorbar: scatterMarkerAttrs.colorbar,
                 line: extendFlat(
                     {
-                        width: scatterMarkerLineAttrs.width
+                        width: scatterMarkerLineAttrs.width,
+                        dash: scatterMarkerLineAttrs.dash
                     },
                     colorAttributes('marker.line')
                 ),

src/traces/scatterternary/attributes.js

@@ -126,6 +126,7 @@ module.exports = {
             line: extendFlat(
                 {
                     width: scatterMarkerLineAttrs.width,
+                    dash: scatterMarkerLineAttrs.dash,
                     editType: 'calc'
                 },
                 colorScaleAttrs('marker.line')

test/image/mocks/scatter_marker_line_dash.json

@@ -0,0 +1,82 @@
+{
+  "data": [
+    {
+      "type": "scatter",
+      "mode": "markers",
+      "x": [1, 2, 3, 4, 5, 6],
+      "y": [1, 1, 1, 1, 1, 1],
+      "marker": {
+        "size": 30,
+        "color": "white",
+        "line": {
+          "color": "black",
+          "width": 3,
+          "dash": ["solid", "dot", "dash", "longdash", "dashdot", "longdashdot"]
+        }
+      },
+      "name": "Array of dashes"
+    },
+    {
+      "type": "scatter",
+      "mode": "markers",
+      "x": [1, 2, 3, 4, 5, 6],
+      "y": [2, 2, 2, 2, 2, 2],
+      "marker": {
+        "size": 30,
+        "color": "rgba(255,0,0,0.2)",
+        "line": {
+          "color": "red",
+          "width": 4,
+          "dash": "dash"
+        }
+      },
+      "name": "Single dash"
+    },
+    {
+      "type": "scatter",
+      "mode": "markers",
+      "x": [1, 2, 3, 4, 5, 6],
+      "y": [3, 3, 3, 3, 3, 3],
+      "marker": {
+        "size": 30,
+        "symbol": "square",
+        "color": "white",
+        "line": {
+          "color": "blue",
+          "width": 2,
+          "dash": "dot"
+        }
+      },
+      "name": "Dot with squares"
+    },
+    {
+      "type": "scatter",
+      "mode": "markers",
+      "x": [1, 2, 3, 4, 5, 6],
+      "y": [4, 4, 4, 4, 4, 4],
+      "marker": {
+        "size": 30,
+        "symbol": "circle-open",
+        "line": {
+          "color": "green",
+          "width": 2,
+          "dash": "dash"
+        }
+      },
+      "name": "Open markers with dash"
+    }
+  ],
+  "layout": {
+    "title": {
+      "text": "Scatter Marker Line Dash Support"
+    },
+    "xaxis": {
+      "range": [0, 7]
+    },
+    "yaxis": {
+      "range": [0, 4]
+    },
+    "width": 600,
+    "height": 400
+  }
+}

test/jasmine/tests/scatter_marker_line_dash_test.js

@@ -0,0 +1,130 @@
+var Plotly = require('../../../lib/index');
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+
+describe('Test scatter marker line dash:', function() {
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+    });
+
+    afterEach(destroyGraphDiv);
+
+    it('should support marker line dash', function(done) {
+        Plotly.newPlot(gd, [{
+            mode: 'markers',
+            x: [1, 2, 3],
+            y: [1, 2, 3],
+            marker: {
+                size: 20,
+                line: {
+                    color: 'red',
+                    width: 2,
+                    dash: 'dash'
+                }
+            }
+        }]).then(function() {
+            var markers = gd.querySelectorAll('.point');
+            expect(markers.length).toBe(3);
+
+            markers.forEach(function(node) {
+                // In plotly.js, dash is applied via stroke-dasharray
+                expect(node.style.strokeDasharray).not.toBe('');
+            });
+        })
+        .then(done, done.fail);
+    });
+
+    it('should support array marker line dash', function(done) {
+         Plotly.newPlot(gd, [{
+            mode: 'markers',
+            x: [1, 2, 3],
+            y: [1, 2, 3],
+            marker: {
+                size: 20,
+                line: {
+                    color: 'red',
+                    width: 2,
+                    dash: ['solid', 'dot', 'dash']
+                }
+            }
+        }]).then(function() {
+            var markers = gd.querySelectorAll('.point');
+            expect(markers.length).toBe(3);
+
+            // 'solid' should have no dasharray or 'none' (represented as empty string in node.style.strokeDasharray)
+            // 'dot' and 'dash' should have numerical dasharrays
+            expect(markers[0].style.strokeDasharray).toBe('');
+            expect(markers[1].style.strokeDasharray).not.toBe('');
+            expect(markers[2].style.strokeDasharray).not.toBe('');
+        })
+        .then(done, done.fail);
+    });
+
+    it('should show marker line dash in the legend', function(done) {
+        Plotly.newPlot(gd, [{
+            mode: 'markers',
+            x: [1, 2, 3],
+            y: [1, 2, 3],
+            marker: {
+                line: {
+                    color: 'red',
+                    width: 2,
+                    dash: 'dash'
+                }
+            }
+        }]).then(function() {
+            var legendPoints = gd.querySelectorAll('.legendpoints path.point');
+            expect(legendPoints.length).toBe(1);
+            expect(legendPoints[0].style.strokeDasharray).not.toBe('');
+        })
+        .then(done, done.fail);
+    });
+
+    it('should update marker line dash via restyle', function(done) {
+        Plotly.newPlot(gd, [{
+            mode: 'markers',
+            x: [1, 2, 3],
+            y: [1, 2, 3],
+            marker: {
+                line: {
+                    color: 'red',
+                    width: 2,
+                    dash: 'solid'
+                }
+            }
+        }]).then(function() {
+            var markers = gd.querySelectorAll('.point');
+            expect(markers[0].style.strokeDasharray).toBe('');
+
+            return Plotly.restyle(gd, {'marker.line.dash': 'dot'});
+        }).then(function() {
+            var markers = gd.querySelectorAll('.point');
+            expect(markers[0].style.strokeDasharray).not.toBe('');
+        })
+        .then(done, done.fail);
+    });
+    it('should support marker line dash on open markers', function(done) {
+        Plotly.newPlot(gd, [{
+            mode: 'markers',
+            x: [1, 2, 3],
+            y: [1, 2, 3],
+            marker: {
+                symbol: 'circle-open',
+                line: {
+                    color: 'red',
+                    width: 2,
+                    dash: 'dash'
+                }
+            }
+        }]).then(function() {
+            var markers = gd.querySelectorAll('.point');
+            expect(markers.length).toBe(3);
+
+            markers.forEach(function(node) {
+                expect(node.style.strokeDasharray).not.toBe('');
+            });
+        })
+        .then(done, done.fail);
+    });});