make sortBubbleSize an option

+changelog for #1025
dc-js · Nov 11, 2015 · ceae366 · ceae366
1 parent 672c7bd
commit ceae366
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 14 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -4,6 +4,7 @@
 * Domain comparison was failing for undefined/null domain values.
 * Option `controlsUseVisibility` to use `visibility` attribute instead of `display` for `filter` and `reset` controls, to reduce disruption to the layout. Was originally on 2.1 branch with default true, now on 2.0 branch with default false. ([#888](https://github.com/dc-js/dc.js/issues/888), [#1016](https://github.com/dc-js/dc.js/issues/1016))
 * Option to add labels above bars in bar chart (e.g. to show the value), by N Reese ([#211](https://github.com/dc-js/dc.js/issues/211) / [#1031](https://github.com/dc-js/dc.js/pull/1031))
+* Option to sort bubbles with smaller bubbles in front; make bubble labels not clickable because they can get in the way, by Matt Traynham ([#1025](https://github.com/dc-js/dc.js/pull/1025))
 
 ## 2.0.0 beta 20
 * Slicing functionality for basic data table paging, based on Chris Alvino's feature for the data grid ([#101](https://github.com/dc-js/dc.js/issues/101))

diff --git a/spec/bubble-chart-spec.js b/spec/bubble-chart-spec.js
@@ -232,24 +232,55 @@ describe('dc.bubbleChart', function () {
         it('creates correct label for each bubble', function () {
             chart.selectAll('g.node title').each(function (d, i) {
                 if (i === 0) {
-                    expect(d3.select(this).text()).toBe('T: {count:2,value:77}');
+                    expect(d3.select(this).text()).toBe('F: {count:0,value:0}');
                 }
                 if (i === 1) {
-                    expect(d3.select(this).text()).toBe('F: {count:0,value:0}');
+                    expect(d3.select(this).text()).toBe('T: {count:2,value:77}');
                 }
             });
         });
 
         it('fills bubbles with correct colors', function () {
             chart.selectAll('circle.bubble').each(function (d, i) {
                 if (i === 0) {
-                    expect(d3.select(this).attr('fill')).toBe('#ff4040');
+                    expect(d3.select(this).attr('fill')).toBe('#a60000');
                 }
                 if (i === 1) {
-                    expect(d3.select(this).attr('fill')).toBe('#a60000');
+                    expect(d3.select(this).attr('fill')).toBe('#ff4040');
                 }
             });
         });
+
+        describe('with bubble sorting', function () {
+            beforeEach(function () {
+                chart
+                    .sortBubbleSize(true)
+                    .render();
+            });
+
+            it('creates correct label for each bubble', function () {
+                chart.selectAll('g.node title').each(function (d, i) {
+                    if (i === 0) {
+                        expect(d3.select(this).text()).toBe('T: {count:2,value:77}');
+                    }
+                    if (i === 1) {
+                        expect(d3.select(this).text()).toBe('F: {count:0,value:0}');
+                    }
+                });
+            });
+
+            it('fills bubbles with correct colors', function () {
+                chart.selectAll('circle.bubble').each(function (d, i) {
+                    if (i === 0) {
+                        expect(d3.select(this).attr('fill')).toBe('#ff4040');
+                    }
+                    if (i === 1) {
+                        expect(d3.select(this).attr('fill')).toBe('#a60000');
+                    }
+                });
+            });
+        });
+
     });
 
     describe('with no filter', function () {
@@ -400,13 +431,12 @@ describe('dc.bubbleChart', function () {
 
     describe('with minimum radius', function () {
         beforeEach(function () {
-
             chart
-                .minRadius(1);
+                .minRadius(1)
+                .render();
         });
 
         it('shows smaller bubbles', function () {
-            chart.render();
             chart.selectAll('circle.bubble').each(function (d, i) {
                 if (i === 0) {
                     expect(Number(d3.select(this).attr('r'))).toBeCloseTo(41.83333333333333,3);

diff --git a/src/bubble-chart.js b/src/bubble-chart.js
@@ -28,6 +28,7 @@ dc.bubbleChart = function (parent, chartGroup) {
     var _chart = dc.bubbleMixin(dc.coordinateGridMixin({}));
 
     var _elasticRadius = false;
+    var _sortBubbleSize = false;
 
     _chart.transitionDuration(750);
 
@@ -53,21 +54,43 @@ dc.bubbleChart = function (parent, chartGroup) {
         return _chart;
     };
 
+    /**
+     * Turn on or off the bubble sorting feature, or return the value of the flag. If enabled,
+     * bubbles will be sorted by their radius, with smaller bubbles in front.
+     * @name sortBubbleSize
+     * @memberof dc.bubbleChart
+     * @instance
+     * @param {Boolean} [sortBubbleSize=false]
+     * @return {Boolean}
+     * @return {dc.bubbleChart}
+     */
+    _chart.sortBubbleSize = function (sortBubbleSize) {
+        if (!arguments.length) {
+            return _sortBubbleSize;
+        }
+        _sortBubbleSize = sortBubbleSize;
+        return _chart;
+    };
+
     _chart.plotData = function () {
         if (_elasticRadius) {
             _chart.r().domain([_chart.rMin(), _chart.rMax()]);
         }
 
         _chart.r().range([_chart.MIN_RADIUS, _chart.xAxisLength() * _chart.maxBubbleRelativeSize()]);
 
-        // sort descending so smaller bubbles are on top
-        var data = _chart.data(),
-            radiusAccessor = _chart.radiusValueAccessor();
-        data.sort(function (a, b) { return d3.descending(radiusAccessor(a), radiusAccessor(b)); });
+        var data = _chart.data();
+        if (_sortBubbleSize) {
+            // sort descending so smaller bubbles are on top
+            var radiusAccessor = _chart.radiusValueAccessor();
+            data.sort(function (a, b) { return d3.descending(radiusAccessor(a), radiusAccessor(b)); });
+        }
         var bubbleG = _chart.chartBodyG().selectAll('g.' + _chart.BUBBLE_NODE_CLASS)
-            .data(data, function (d) { return d.key; });
-        // Call order here to update dom order based on sort
-        bubbleG.order();
+                .data(data, function (d) { return d.key; });
+        if (_sortBubbleSize) {
+            // Call order here to update dom order based on sort
+            bubbleG.order();
+        }
 
         renderNodes(bubbleG);