custom scatter symbols

fixes #1274

Author: gordonwoodhull

spec/scatter-plot-spec.js

@@ -74,6 +74,48 @@ describe('dc.scatterPlot', function () {
             });
         });
 
+        function fishSymbol () {
+            var size;
+            var points = [[2, 0], [1, -1], [-1, 1], [-1, -1], [1, 1]];
+            function symbol (d, i) {
+                // native size is 3 square pixels, so to get size N, multiply by sqrt(N)/3
+                var m = size.call(this, d, i);
+                m = Math.sqrt(m) / 3;
+                var path = d3.svg.line()
+                        .x(function (d) {
+                            return d[0] * m;
+                        })
+                        .y(function (d) {
+                            return d[1] * m;
+                        });
+                return path(points) + 'Z';
+            }
+            symbol.type = function () {
+                if (arguments.length) {
+                    throw new Error('no, you must have fish');
+                }
+                return 'fish';
+            };
+            symbol.size = function (_) {
+                if (!arguments.length) {
+                    return size;
+                }
+                size = d3.functor(_);
+                return symbol;
+            };
+            return symbol;
+        }
+        describe('with a fish symbol', function () {
+            beforeEach(function () {
+                chart.customSymbol(fishSymbol().size(chart.symbolSize()))
+                    .render();
+            });
+
+            it('should draw fishes', function () {
+                expect(symbolsMatching(matchSymbol(fishSymbol(), chart.symbolSize())).length).toBe(9);
+            });
+        });
+
         describe('with title rendering disabled', function () {
             beforeEach(function () {
                 chart.renderTitle(false).render();
@@ -303,6 +345,16 @@ describe('dc.scatterPlot', function () {
         };
     }
 
+    function matchSymbol (s, r) {
+        return function () {
+            var symbol = d3.select(this);
+            var size = Math.pow(r, 2);
+            var path = s.size(size)();
+            var result = comparePaths(symbol.attr('d'), path);
+            return result.pass;
+        };
+    }
+
     function symbolsMatching (pred) {
         function getData (symbols) {
             return symbols[0].map(function (symbol) {

src/scatter-plot.js

@@ -55,15 +55,16 @@ dc.scatterPlot = function (parent, chartGroup) {
     var _emptyColor = null;
     var _filtered = [];
 
-    _symbol.size(function (d, i) {
+    function elementSize (d, i) {
         if (!_existenceAccessor(d)) {
             return Math.pow(_emptySize, 2);
         } else if (_filtered[i]) {
             return Math.pow(_symbolSize, 2);
         } else {
             return Math.pow(_excludedSize, 2);
         }
-    });
+    }
+    _symbol.size(elementSize);
 
     dc.override(_chart, '_filter', function (filter) {
         if (!arguments.length) {
@@ -174,6 +175,15 @@ dc.scatterPlot = function (parent, chartGroup) {
         return _chart;
     };
 
+    _chart.customSymbol = function (customSymbol) {
+        if (!arguments.length) {
+            return _symbol;
+        }
+        _symbol = customSymbol;
+        _symbol.size(elementSize);
+        return _chart;
+    };
+
     /**
      * Set or get radius for symbols.
      * @method symbolSize