Add class for customdata

Author: rreusser

src/traces/scatter/style.js

@@ -24,9 +24,16 @@ module.exports = function style(gd) {
 
     s.selectAll('g.points')
         .each(function(d) {
-            d3.select(this).selectAll('path.point')
-                .call(Drawing.pointStyle, d.trace || d[0].trace);
-            d3.select(this).selectAll('text')
+            var el = d3.select(this);
+            var pt = el.selectAll('path.point');
+
+            pt.call(Drawing.pointStyle, d.trace || d[0].trace);
+
+            pt.each(function(cd) {
+                d3.select(this).classed('plotly-customdata', cd.data !== null && cd.data !== undefined);
+            });
+
+            el.selectAll('text')
                 .call(Drawing.textPointStyle, d.trace || d[0].trace);
         });
 

test/jasmine/tests/scatter_test.js

@@ -1,8 +1,14 @@
+var d3 = require('d3');
 var Scatter = require('@src/traces/scatter');
 var makeBubbleSizeFn = require('@src/traces/scatter/make_bubble_size_func');
 var linePoints = require('@src/traces/scatter/line_points');
 var Lib = require('@src/lib');
 
+var Plotly = require('@lib/index');
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+var fail = require('../assets/fail_test');
+
 describe('Test scatter', function() {
     'use strict';
 
@@ -326,3 +332,32 @@ describe('Test scatter', function() {
     });
 
 });
+
+describe('end-to-end scatter tests', function() {
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+    });
+
+    afterEach(destroyGraphDiv);
+
+    it('should add a plotly-customdata class to points with custom data', function(done) {
+        Plotly.plot(gd, [{
+            x: [1, 2, 3, 4, 5, 6, 7],
+            y: [2, 3, 4, 5, 6, 7, 8],
+            customdata: [null, undefined, 0, false, {foo: 'bar'}, 'a']
+        }]).then(function() {
+            var points = d3.selectAll('g.scatterlayer').selectAll('.point');
+
+            // Rather than just duplicating the logic, let's be explicit about
+            // what's expected. Specifially, only null and undefined (the default)
+            // do *not* add the class.
+            var expected = [false, false, true, true, true, true, false];
+
+            points.each(function(cd, i) {
+                expect(d3.select(this).classed('plotly-customdata')).toBe(expected[i]);
+            });
+        }).catch(fail).then(done);
+    });
+});