a rewrite of bar transitions

composite 2-pass drawing pre- & post- scale change

coord.plotData shall returns continuation if it wants to participate
the immediate action draws anything before the transition
the continuation will be run after the scale change

note there is nothing asynchronous here. instead we are using
continuations for the sake of capturing the joined selections that both
passes need.

2-pass is implemented but not specialized for the bar chart only

this commit also makes explicit that axis preparation and scale-setting
is different for render and redraw. render sets the scales twice,
probably to the same thing. this is because the scales must be valid
for the first pass, and they must *not* be set before a redraw, because
they must be consistent with the old view.

we'll see if this causes problems when clients (& maybe focus chart)
explicitly change the x domain. but if there are problems here, they are
probably not new. any enter selections on a too-soon scale change were
probably already screwed up.

implement 2-phase drawing for bar chart

but, as i guessed might happen, this does not work for cases where
the scale was updated by the client

copy/set/restore scales to make last available

we must let the user change the scale, so we will need to copy
after each draw. however, this push/pop stuff is probably wrong
(and 2-phase is probably wrong too).

will clean up later after i have a working poc.

apply barWidth to entering

this logic is just wrong

what more is there to say

the intent here was not to string-compare null
but it ended up skipping zeroes

this is still somewhat wrong because it *should* string-compare zeroes
but let's just deal with the obvious and move on

fetch data before restoring scales

... of course, the idea that the data should depend on the current
scale is infuriating in itself, but again, this branch is a poc

test left-to-right swipe

currently the middle is lost

make state explicit

it's a lot of parameters but it seems much more clear to pass them
in rather than assuming they will be set on the chart.

get rid of the very clever continuation trick i just put in. :-|

also stop caching barWidth and xUnitCount, which wouldn't work
anymore (since we have to look at the past and present at once).

this works but a lot of tests are failing

it's now possible to observe scale changing type

from linear to ordinal, for example
fun.

also track last right Y scale

and don't pass the left :)

this was not the way to process data better

we do want to call .data() less, but this didn't actually help
we do want to get data for the right range, this didn't do that either

this was only here to get data at the right scale-moment
but we're past that now

fade out + refinements for ordinal bar transitions

always fade out as we're fading in

ordinal bars should not move or size as they enter/exit, because
logically there is nowhere for them to come from / go to.

pull domainFilter out of prepareValues

too deep, too stateful

start transitioning from .data() to computeStacks

bar chart draw bounds enclosing old and new domain

to avoid the gap

technically we could remove what's outside the drawing area afterward

rotate through a few more spans

to display the off-edge bug #949

Author: gordonwoodhull

src/bar-chart.js

@@ -34,14 +34,7 @@ dc.barChart = function (parent, chartGroup) {
     var _gap = DEFAULT_GAP_BETWEEN_BARS;
     var _centerBar = false;
     var _alwaysUseRounding = false;
-
-    var _barWidth;
-
-    dc.override(_chart, 'rescale', function () {
-        _chart._rescale();
-        _barWidth = undefined;
-        return _chart;
-    });
+    var _growFromZero = false;
 
     dc.override(_chart, 'render', function () {
         if (_chart.round() && _centerBar && !_alwaysUseRounding) {
@@ -56,11 +49,13 @@ dc.barChart = function (parent, chartGroup) {
         return dc.utils.printSingleValue(d.y0 + d.y);
     }, false);
 
-    _chart.plotData = function () {
+    _chart.plotData = function (params) {
+        var bounds = _chart.isOrdinal() ? null : params.fullBounds();
+        var stackData = _chart.computeStacks(bounds);
         var layers = _chart.chartBodyG().selectAll('g.stack')
-            .data(_chart.data());
-
-        calculateBarWidth();
+                .data(stackData);
+        params.preBarWidth = calculateBarWidth(params.preXScale);
+        params.postBarWidth = calculateBarWidth(params.postXScale);
 
         layers
             .enter()
@@ -73,19 +68,22 @@ dc.barChart = function (parent, chartGroup) {
         layers.each(function (d, i) {
             var layer = d3.select(this);
 
-            renderBars(layer, i, d);
+            renderBars(layer, d, params);
 
             if (_chart.renderLabel() && last === i) {
-                renderLabels(layer, i, d);
+                renderLabels(layer, d, params);
             }
         });
     };
 
-    function barHeight (d) {
-        return dc.utils.safeNumber(Math.abs(_chart.y()(d.y + d.y0) - _chart.y()(d.y0)));
+    function barHeight (yScale) {
+        return function (d) {
+            return dc.utils.safeNumber(Math.abs(yScale(d.y + d.y0) - yScale(d.y0)));
+        };
     }
 
-    function renderLabels (layer, layerIndex, d) {
+    function renderLabels (layer, d, params) {
+        // stuff that should happen before scales updated
         var labels = layer.selectAll('text.barLabel')
             .data(d.values, dc.pluck('x'));
 
@@ -100,21 +98,9 @@ dc.barChart = function (parent, chartGroup) {
         }
 
         dc.transition(labels, _chart.transitionDuration(), _chart.transitionDelay())
-            .attr('x', function (d) {
-                var x = _chart.x()(d.x);
-                if (!_centerBar) {
-                    x += _barWidth / 2;
-                }
-                return dc.utils.safeNumber(x);
-            })
+            .attr('x', barX(params.postXScale))
             .attr('y', function (d) {
-                var y = _chart.y()(d.y + d.y0);
-
-                if (d.y < 0) {
-                    y -= barHeight(d);
-                }
-
-                return dc.utils.safeNumber(y - LABEL_PADDING);
+                return barY(params.postYScale)(d) - LABEL_PADDING;
             })
             .text(function (d) {
                 return _chart.label()(d);
@@ -125,16 +111,59 @@ dc.barChart = function (parent, chartGroup) {
             .remove();
     }
 
-    function renderBars (layer, layerIndex, d) {
+    function barX (xScale, barWidth) {
+        return function (d) {
+            var x = xScale(d.x);
+            if (_centerBar) {
+                x -= barWidth / 2;
+            }
+            if (_chart.isOrdinal() && _gap !== undefined) {
+                x += _gap / 2;
+            }
+            return dc.utils.safeNumber(x);
+        };
+    }
+    function barY (yScale) {
+        return function (d) {
+            var y = yScale(d.y + d.y0);
+
+            if (d.y < 0) {
+                y -= barHeight(yScale)(d);
+            }
+
+            return dc.utils.safeNumber(y);
+        };
+    }
+
+    function renderBars (layer, d, params) {
+        // stuff that should happen before scales updated
         var bars = layer.selectAll('rect.bar')
             .data(d.values, dc.pluck('x'));
 
         var enter = bars.enter()
             .append('rect')
             .attr('class', 'bar')
-            .attr('fill', dc.pluck('data', _chart.getColor))
-            .attr('y', _chart.yAxisHeight())
-            .attr('height', 0);
+            .attr('fill', dc.pluck('data', _chart.getColor));
+
+        if (!_chart.isOrdinal()) { // there's nowhere to arrive from if ordinal
+            enter
+                .attr('x', barX(params.preXScale, params.preBarWidth))
+                .attr('width', params.preBarWidth);
+        }
+
+        if (_growFromZero) {
+            enter
+                .attr('y', _chart.yAxisHeight())
+                .attr('height', 0);
+        } else {
+            if (!_chart.isOrdinal()) {
+                enter
+                    .attr('y', barY(params.preYScale))
+                    .attr('height', barHeight(params.preYScale));
+            }
+            enter
+                .attr('opacity', 0);
+        }
 
         if (_chart.renderTitle()) {
             enter.append('title').text(dc.pluck('data', _chart.title(d.name)));
@@ -145,55 +174,41 @@ dc.barChart = function (parent, chartGroup) {
         }
 
         dc.transition(bars, _chart.transitionDuration(), _chart.transitionDelay())
-            .attr('x', function (d) {
-                var x = _chart.x()(d.x);
-                if (_centerBar) {
-                    x -= _barWidth / 2;
-                }
-                if (_chart.isOrdinal() && _gap !== undefined) {
-                    x += _gap / 2;
-                }
-                return dc.utils.safeNumber(x);
-            })
-            .attr('y', function (d) {
-                var y = _chart.y()(d.y + d.y0);
-
-                if (d.y < 0) {
-                    y -= barHeight(d);
-                }
-
-                return dc.utils.safeNumber(y);
-            })
-            .attr('width', _barWidth)
-            .attr('height', function (d) {
-                return barHeight(d);
-            })
+            .attr('x', barX(params.postXScale, params.postBarWidth))
+            .attr('y', barY(params.postYScale))
+            .attr('width', params.postBarWidth)
+            .attr('height', barHeight(params.postYScale))
+            .attr('opacity', 1)
             .attr('fill', dc.pluck('data', _chart.getColor))
             .select('title').text(dc.pluck('data', _chart.title(d.name)));
 
-        dc.transition(bars.exit(), _chart.transitionDuration(), _chart.transitionDelay())
-            .attr('x', function (d) { return _chart.x()(d.x); })
-            .attr('width', _barWidth * 0.9)
+        var transOut = dc.transition(bars.exit(), _chart.transitionDuration(), _chart.transitionDelay())
+            .attr('height', barHeight(params.postYScale))
+            .attr('opacity', 0);
+        if (!_chart.isOrdinal()) { // there's nowhere to "go" if ordinal
+            transOut.attr('x', barX(params.postXScale, params.postBarWidth))
+                .attr('y', barY(params.postYScale))
+                .attr('width', params.postBarWidth);
+        }
+        transOut
             .remove();
     }
 
-    function calculateBarWidth () {
-        if (_barWidth === undefined) {
-            var numberOfBars = _chart.xUnitCount();
+    function calculateBarWidth (xScale) {
+        var barWidth, numberOfBars = _chart.xUnitCount(xScale);
 
-            // please can't we always use rangeBands for bar charts?
-            if (_chart.isOrdinal() && _gap === undefined) {
-                _barWidth = Math.floor(_chart.x().rangeBand());
-            } else if (_gap) {
-                _barWidth = Math.floor((_chart.xAxisLength() - (numberOfBars - 1) * _gap) / numberOfBars);
-            } else {
-                _barWidth = Math.floor(_chart.xAxisLength() / (1 + _chart.barPadding()) / numberOfBars);
-            }
+        if (_chart.isOrdinal() && _gap === undefined && xScale.rangeBand) { // may have been previously not ordinal
+            barWidth = Math.floor(xScale.rangeBand());
+        } else if (_gap) {
+            barWidth = Math.floor((_chart.xAxisLength() - (numberOfBars - 1) * _gap) / numberOfBars);
+        } else {
+            barWidth = Math.floor(_chart.xAxisLength() / (1 + _chart.barPadding()) / numberOfBars);
+        }
 
-            if (_barWidth === Infinity || isNaN(_barWidth) || _barWidth < MIN_BAR_WIDTH) {
-                _barWidth = MIN_BAR_WIDTH;
-            }
+        if (barWidth === Infinity || isNaN(barWidth) || barWidth < MIN_BAR_WIDTH) {
+            barWidth = MIN_BAR_WIDTH;
         }
+        return barWidth;
     }
 
     _chart.fadeDeselectedArea = function () {
@@ -270,6 +285,24 @@ dc.barChart = function (parent, chartGroup) {
         return _gap === undefined;
     };
 
+    /**
+     * Whether bars should grow from the bottom of the chart when they are first drawn (true)
+     * or fade in (false).
+     * @method growFromZero
+     * @memberof dc.barChart
+     * @instance
+     * @param {Boolean} [growFromZero=false]
+     * @return {Boolean}
+     * @return {dc.barChart}
+     */
+    _chart.growFromZero = function (growFromZero) {
+        if (!arguments.length) {
+            return _growFromZero;
+        }
+        _growFromZero = growFromZero;
+        return _chart;
+    };
+
     /**
      * Get or set the outer padding on an ordinal bar chart. This setting has no effect on non-ordinal charts.
      * Will pad the width by `padding * barWidth` on each side of the chart.

src/composite-chart.js

@@ -34,7 +34,7 @@ dc.compositeChart = function (parent, chartGroup) {
     var _rightYAxis = d3.svg.axis(),
         _rightYAxisLabel = 0,
         _rightYAxisLabelPadding = DEFAULT_RIGHT_Y_AXIS_LABEL_PADDING,
-        _rightY,
+        _rightY, _lastRightYScale,
         _rightAxisGridLines = false;
 
     _chart._mandatoryAttributes([]);
@@ -192,7 +192,13 @@ dc.compositeChart = function (parent, chartGroup) {
         child.g().attr('class', SUB_CHART_CLASS + ' _' + i);
     }
 
-    _chart.plotData = function () {
+    _chart.plotData = function (params) {
+        var rightParams = {
+            preXScale: params.preXScale,
+            preYScale: _lastRightYScale,
+            postXScale: params.postYScale,
+            postYScale: _chart.rightY()
+        };
         for (var i = 0; i < _children.length; ++i) {
             var child = _children[i];
 
@@ -211,15 +217,16 @@ dc.compositeChart = function (parent, chartGroup) {
             if (child.useRightYAxis()) {
                 child.y(_chart.rightY());
                 child.yAxis(_chart.rightYAxis());
+                child.plotData(rightParams);
             } else {
                 child.y(_chart.y());
                 child.yAxis(_chart.yAxis());
+                child.plotData(params);
             }
 
-            child.plotData();
-
             child._activateRenderlets();
         }
+        _lastRightYScale = _rightY ? _rightY.copy() : null;
     };
 
     /**