lift elasticRadius to bubbleMixin

fixes #661

Author: gordonwoodhull

Changelog.md

@@ -1,4 +1,5 @@
 ## 2.1.2
+ * Lift `elasticRadius` from `bubbleChart` to `bubbleMixin`, making it available to `bubbleOverlay` ([#661](https://github.com/dc-js/dc.js/issues/661))
 Stop using `group.top()` in favor of `group.all()` sorting and slicing. ([#934](https://github.com/dc-js/dc.js/issues/934))
  * Eliminate use of `group.top()` in cap mixin, by Macy Abbey ([#1184](https://github.com/dc-js/dc.js/pull/1184)). It already had to agree with `chart.ordering()` for the results to make sense.
  * Eliminate `group.top()` in number display. This one is more problematic but probably less common. Although the number display now defaults ordering to `function (kv) { return kv.value; }`, applications which use a group with multiple bins with the number display, which were using `group.order()` to specify which bin should be displayed, must now specify `numberDisplay.ordering()` instead.

spec/bubble-overlay-spec.js

@@ -3,36 +3,39 @@ describe('dc.bubbleOverlay', function () {
     var chart, data;
     var dimension, group;
 
-    describe('creation', function () {
-        beforeEach(function () {
-            data = crossfilter(loadDateFixture());
-            dimension = data.dimension(function (d) {return d.state;});
-            group = dimension.group().reduceSum(function (d) {return d.value;});
-
-            var id = 'bubble-overlay';
-            var parent = appendChartID(id);
-            var svg = parent.append('svg');
-
-            chart = dc.bubbleOverlay('#' + id)
-                .svg(svg)
-                .dimension(dimension)
-                .group(group)
-                .width(300)
-                .height(200)
-                .transitionDuration(0)
-                .title(function (d) {return 'Title: ' + d.key;})
-                .r(d3.scale.linear().domain([0, 500]))
-                .ordinalColors(['blue'])
-                .point('California', 100, 120)
-                .point('Colorado', 300, 120)
-                .point('Delaware', 500, 220)
-                .point('Ontario', 180, 90)
-                .point('Mississippi', 120, 220)
-                .point('Oklahoma', 200, 350);
-
-            chart.render();
-        });
+    beforeEach(function () {
+        data = crossfilter(loadDateFixture());
+        dimension = data.dimension(function (d) {return d.state;});
+        group = dimension.group().reduceSum(function (d) {return d.value;});
+
+        var id = 'bubble-overlay';
+        var parent = appendChartID(id);
+        var width = 600, height = 400;
+        var svg = parent.append('svg')
+                .attr({width: width, height: height});
+
+        chart = dc.bubbleOverlay('#' + id)
+            .svg(svg)
+            .dimension(dimension)
+            .group(group)
+            .width(width)
+            .height(height)
+            .transitionDuration(0)
+            .title(function (d) {return 'Title: ' + d.key;})
+            .r(d3.scale.linear().domain([0, 100]))
+            .maxBubbleRelativeSize(0.1)
+            .ordinalColors(['blue'])
+            .point('California', 100, 120)
+            .point('Colorado', 300, 120)
+            .point('Delaware', 500, 220)
+            .point('Ontario', 180, 90)
+            .point('Mississippi', 120, 220)
+            .point('Oklahoma', 200, 350);
+
+        chart.render();
+    });
 
+    describe('creation', function () {
         it('should generate an instance of the dc chart', function () {
             expect(dc.instanceOfChart(chart)).toBeTruthy();
         });
@@ -60,8 +63,8 @@ describe('dc.bubbleOverlay', function () {
         });
 
         it('should generate correct radii for circles', function () {
-            expect(d3.select(chart.selectAll('circle.bubble')[0][0]).attr('r')).toEqual('34.64');
-            expect(d3.select(chart.selectAll('circle.bubble')[0][3]).attr('r')).toEqual('22.32');
+            expect(d3.select(chart.selectAll('circle.bubble')[0][0]).attr('r')).toEqual('87');
+            expect(d3.select(chart.selectAll('circle.bubble')[0][3]).attr('r')).toEqual('48.5');
         });
 
         it('should generate correct labels', function () {
@@ -98,5 +101,52 @@ describe('dc.bubbleOverlay', function () {
             expect(d3.select(chart.selectAll('g.node')[0][3]).attr('class')).toEqual('node ontario deselected');
         });
     });
+
+    function removeEmptyBins (group) {
+        return {
+            all: function () {
+                return group.all().filter(function (d) {
+                    return d.value !== 0;
+                });
+            }
+        };
+    }
+    describe('filtering another dimension', function () {
+        var regionDim;
+        beforeEach(function () {
+            chart.group(removeEmptyBins(group)).render();
+            regionDim = data.dimension(function (d) { return d.region; });
+        });
+        function expectRadii (expected) {
+            var circles = chart.selectAll('circle.bubble')[0];
+            console.log(circles.map(function (c) { return +d3.select(c).attr('r'); }));
+            circles.forEach(function (c, i) {
+                expect(+d3.select(c).attr('r')).toBeWithinDelta(expected[i], 0.1);
+            });
+        }
+        describe('without elastic radius', function () {
+            it('should have reasonable radii', function () {
+                expectRadii([87, 21, 26.5, 48.5, 48.5, 37.5]);
+            });
+            it('filtering should zero out some radii', function () {
+                regionDim.filter('Central');
+                dc.redrawAll();
+                expectRadii([0, 0, 0, 37.5, 48.5, 0]);
+            });
+        });
+        describe('with elastic radius', function () {
+            beforeEach(function () {
+                chart.elasticRadius(true).render();
+            });
+            it('should lock to the minimum and maximum radius sizes', function () {
+                expectRadii([60, 10, 14.1, 30.8, 30.8, 22.5]);
+            });
+            it('filtering should lock the remaining bubbles to min and max radius sizes', function () {
+                regionDim.filter('Central');
+                dc.redrawAll();
+                expectRadii([0, 0, 0, 10, 60, 0]);
+            });
+        });
+    });
 });
 

src/bubble-chart.js

@@ -28,8 +28,6 @@
 dc.bubbleChart = function (parent, chartGroup) {
     var _chart = dc.bubbleMixin(dc.coordinateGridMixin({}));
 
-    var _elasticRadius = false;
-
     _chart.transitionDuration(750);
 
     _chart.transitionDelay(0);
@@ -38,28 +36,8 @@ dc.bubbleChart = function (parent, chartGroup) {
         return 'translate(' + (bubbleX(d)) + ',' + (bubbleY(d)) + ')';
     };
 
-    /**
-     * Turn on or off the elastic bubble radius feature, or return the value of the flag. If this
-     * feature is turned on, then bubble radii will be automatically rescaled to fit the chart better.
-     * @method elasticRadius
-     * @memberof dc.bubbleChart
-     * @instance
-     * @param {Boolean} [elasticRadius=false]
-     * @returns {Boolean|dc.bubbleChart}
-     */
-    _chart.elasticRadius = function (elasticRadius) {
-        if (!arguments.length) {
-            return _elasticRadius;
-        }
-        _elasticRadius = elasticRadius;
-        return _chart;
-    };
-
     _chart.plotData = function () {
-        if (_elasticRadius) {
-            _chart.r().domain([_chart.rMin(), _chart.rMax()]);
-        }
-
+        _chart.calculateRadiusDomain();
         _chart.r().range([_chart.MIN_RADIUS, _chart.xAxisLength() * _chart.maxBubbleRelativeSize()]);
 
         var data = _chart.data();

src/bubble-mixin.js

@@ -11,6 +11,7 @@ dc.bubbleMixin = function (_chart) {
     var _maxBubbleRelativeSize = 0.3;
     var _minRadiusWithLabel = 10;
     var _sortBubbleSize = false;
+    var _elasticRadius = false;
 
     _chart.BUBBLE_NODE_CLASS = 'node';
     _chart.BUBBLE_CLASS = 'bubble';
@@ -55,6 +56,29 @@ dc.bubbleMixin = function (_chart) {
         return _chart;
     };
 
+    /**
+     * Turn on or off the elastic bubble radius feature, or return the value of the flag. If this
+     * feature is turned on, then bubble radii will be automatically rescaled to fit the chart better.
+     * @method elasticRadius
+     * @memberof dc.bubbleChart
+     * @instance
+     * @param {Boolean} [elasticRadius=false]
+     * @returns {Boolean|dc.bubbleChart}
+     */
+    _chart.elasticRadius = function (elasticRadius) {
+        if (!arguments.length) {
+            return _elasticRadius;
+        }
+        _elasticRadius = elasticRadius;
+        return _chart;
+    };
+
+    _chart.calculateRadiusDomain = function () {
+        if (_elasticRadius) {
+            _chart.r().domain([_chart.rMin(), _chart.rMax()]);
+        }
+    };
+
     /**
      * Get or set the radius value accessor function. If set, the radius value accessor function will
      * be used to retrieve a data value for each bubble. The data retrieved then will be mapped using

src/bubble-overlay.js

@@ -96,6 +96,7 @@ dc.bubbleOverlay = function (parent, chartGroup) {
 
     function initializeBubbles () {
         var data = mapData();
+        _chart.calculateRadiusDomain();
 
         _points.forEach(function (point) {
             var nodeG = getNodeG(point, data);
@@ -155,6 +156,7 @@ dc.bubbleOverlay = function (parent, chartGroup) {
 
     function updateBubbles () {
         var data = mapData();
+        _chart.calculateRadiusDomain();
 
         _points.forEach(function (point) {
             var nodeG = getNodeG(point, data);