scatter filter color/opacity

for #938
simplify some of the logic
breaks three tests, however, so not merging to master yet.

also introduces emptySize as a better name for hiddenSize

src/scatter-plot.js

@@ -34,17 +34,20 @@ dc.scatterPlot = function (parent, chartGroup) {
 
     var _locator = function (d) {
         return 'translate(' + _chart.x()(_chart.keyAccessor()(d)) + ',' +
-                              _chart.y()(_chart.valueAccessor()(d)) + ')';
+            _chart.y()(_chart.valueAccessor()(d)) + ')';
     };
 
     var _symbolSize = 3;
     var _highlightedSize = 5;
-    var _hiddenSize = 0;
+    var _excludedColor = null;
+    var _excludedOpacity = 1.0;
+    var _emptySize = 0;
+    var _filtered = [];
 
-    _symbol.size(function (d) {
+    _symbol.size(function (d, i) {
         if (!_existenceAccessor(d)) {
-            return _hiddenSize;
-        } else if (this.filtered) {
+            return _emptySize;
+        } else if (_filtered[i]) {
             return Math.pow(_highlightedSize, 2);
         } else {
             return Math.pow(_symbolSize, 2);
@@ -61,19 +64,30 @@ dc.scatterPlot = function (parent, chartGroup) {
 
     _chart.plotData = function () {
         var symbols = _chart.chartBodyG().selectAll('path.symbol')
-            .data(_chart.data());
+                .data(_chart.data());
 
         symbols
             .enter()
-        .append('path')
+            .append('path')
             .attr('class', 'symbol')
             .attr('opacity', 0)
             .attr('fill', _chart.getColor)
             .attr('transform', _locator);
 
+        symbols.each(function (d, i) {
+            _filtered[i] = !_chart.filter() || _chart.filter().isFiltered(d.key);
+        });
+
         dc.transition(symbols, _chart.transitionDuration())
-            .attr('opacity', function (d) { return _existenceAccessor(d) ? 1 : 0; })
-            .attr('fill', _chart.getColor)
+            .attr('opacity', function (d, i) {
+                return !_existenceAccessor(d) ? 0 :
+                    _filtered[i] ? 1 : _chart.excludedOpacity();
+            })
+            .attr('fill', function (d, i) {
+                return _chart.excludedColor() && !_filtered[i] ?
+                    _chart.excludedColor() :
+                    _chart.getColor(d);
+            })
             .attr('transform', _locator)
             .attr('d', _symbol);
 
@@ -85,13 +99,13 @@ dc.scatterPlot = function (parent, chartGroup) {
      * Get or set the existence accessor.  If a point exists, it is drawn with
      * {@link #dc.scatterPlot+symbolSize symbolSize} radius and
      * opacity 1; if it does not exist, it is drawn with
-     * {@link #dc.scatterPlot+hiddenSize hiddenSize} radius and opacity 0. By default,
+     * {@link #dc.scatterPlot+emptySize emptySize} radius and opacity 0. By default,
      * the existence accessor checks if the reduced value is truthy.
      * @method existenceAccessor
      * @memberof dc.scatterPlot
      * @instance
      * @see {@link #dc.scatterPlot+symbolSize symbolSize}
-     * @see {@link #dc.scatterPlot+hiddenSize hiddenSize}
+     * @see {@link #dc.scatterPlot+emptySize emptySize}
      * @example
      * // default accessor
      * chart.existenceAccessor(function (d) { return d.value; });
@@ -167,21 +181,58 @@ dc.scatterPlot = function (parent, chartGroup) {
         return _chart;
     };
 
+    /**
+     * Set or get color for symbols excluded from this chart's filter. If null, no
+     * special color is applied for symbols based on their filter status
+     * @method excludedColor
+     * @memberof dc.scatterPlot
+     * @instance
+     * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size d3.svg.symbol().size()}
+     * @param {Number} [excludedColor=null]
+     * @return {Number}
+     * @return {dc.scatterPlot}
+     */
+    _chart.excludedColor = function (excludedColor) {
+        if (!arguments.length) {
+            return _excludedColor;
+        }
+        _excludedColor = excludedColor;
+        return _chart;
+    };
+
+    /**
+     * Set or get opacity for symbols excluded from this chart's filter.
+     * @method excludedOpacity
+     * @memberof dc.scatterPlot
+     * @instance
+     * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size d3.svg.symbol().size()}
+     * @param {Number} [excludedOpacity=1.0]
+     * @return {Number}
+     * @return {dc.scatterPlot}
+     */
+    _chart.excludedOpacity = function (excludedOpacity) {
+        if (!arguments.length) {
+            return _excludedOpacity;
+        }
+        _excludedOpacity = excludedOpacity;
+        return _chart;
+    };
+
     /**
      * Set or get radius for symbols when the group is empty.
-     * @method hiddenSize
+     * @method emptySize
      * @memberof dc.scatterPlot
      * @instance
      * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size d3.svg.symbol().size()}
-     * @param {Number} [hiddenSize=0]
+     * @param {Number} [emptySize=0]
      * @return {Number}
      * @return {dc.scatterPlot}
      */
-    _chart.hiddenSize = function (hiddenSize) {
+    _chart.hiddenSize = _chart.emptySize = function (emptySize) {
         if (!arguments.length) {
-            return _hiddenSize;
+            return _emptySize;
         }
-        _hiddenSize = hiddenSize;
+        _emptySize = emptySize;
         return _chart;
     };
 
@@ -237,14 +288,6 @@ dc.scatterPlot = function (parent, chartGroup) {
         return _chart.brush().empty() || !extent || extent[0][0] >= extent[1][0] || extent[0][1] >= extent[1][1];
     };
 
-    function resizeFiltered (filter) {
-        var symbols = _chart.selectAll('.chart-body path.symbol').each(function (d) {
-            this.filtered = filter && filter.isFiltered(d.key);
-        });
-
-        dc.transition(symbols, _chart.transitionDuration()).attr('d', _symbol);
-    }
-
     _chart._brushing = function () {
         var extent = _chart.extendBrush();
 
@@ -256,8 +299,6 @@ dc.scatterPlot = function (parent, chartGroup) {
                 _chart.redrawGroup();
             });
 
-            resizeFiltered(false);
-
         } else {
             var ranged2DFilter = dc.filters.RangedTwoDimensionalFilter(extent);
             dc.events.trigger(function () {
@@ -266,7 +307,6 @@ dc.scatterPlot = function (parent, chartGroup) {
                 _chart.redrawGroup();
             }, dc.constants.EVENT_DELAY);
 
-            resizeFiltered(ranged2DFilter);
         }
     };