From 5e78ec57c3756647a07947e9eeaae8625347ca3f Mon Sep 17 00:00:00 2001
From: Robin Hu <robinfhu@gmail.com>
Date: Sat, 24 Aug 2013 11:06:25 -0400
Subject: [PATCH] Fixing a bug related to transitions and delays with mutliBar.

---
 examples/multiBar.html      |  1 +
 examples/multiBarChart.html |  1 +
 src/models/multiBar.js      | 21 +++++++++++++++++----
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/examples/multiBar.html b/examples/multiBar.html
index c7faf25..4c830d6 100644
--- a/examples/multiBar.html
+++ b/examples/multiBar.html
@@ -81,6 +81,7 @@ nv.addGraph({
       d3.select('#test1 svg')
         .attr('width', width)
         .attr('height', height)
+        transition().duration(500)
         .call(graph);
 
       };
diff --git a/examples/multiBarChart.html b/examples/multiBarChart.html
index 13c63ec..55e3010 100644
--- a/examples/multiBarChart.html
+++ b/examples/multiBarChart.html
@@ -70,6 +70,7 @@ nv.addGraph(function() {
       .barColor(d3.scale.category20().range())
       .margin({bottom: 100})
       .transitionDuration(300)
+      .delay(0)
       .rotateLabels(45)
       .groupSpacing(0.1)
       ;
diff --git a/src/models/multiBar.js b/src/models/multiBar.js
index a13a051..be97a11 100644
--- a/src/models/multiBar.js
+++ b/src/models/multiBar.js
@@ -146,6 +146,8 @@ nv.models.multiBar = function() {
 
       //------------------------------------------------------------
 
+
+
       defsEnter.append('clipPath')
           .attr('id', 'nv-edge-clip-' + id)
         .append('rect');
@@ -158,13 +160,16 @@ nv.models.multiBar = function() {
 
 
       var groups = wrap.select('.nv-groups').selectAll('.nv-group')
-          .data(function(d) { return d }, function(d,i) { return i});
+          .data(function(d) { return d }, function(d) { return d.key });
       groups.enter().append('g')
           .style('stroke-opacity', 1e-6)
           .style('fill-opacity', 1e-6);
       groups.exit()
+        .transition()
         .selectAll('rect.nv-bar')
-          .transition()
+        .delay(function(d,i) { 
+             return i * delay/ data[0].values.length;
+        })
           .attr('y', function(d) { return stacked ? y0(d.y0) : y0(0) })
           .attr('height', 0)
           .remove();
@@ -192,7 +197,9 @@ nv.models.multiBar = function() {
           })
           .attr('y', function(d) { return y0(stacked ? d.y0 : 0) })
           .attr('height', 0)
-          .attr('width', x.rangeBand() / (stacked ? 1 : data.length) );
+          .attr('width', x.rangeBand() / (stacked ? 1 : data.length) )
+          .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })
+          ;
       bars
           .style('fill', function(d,i,j){ return color(d, j, i);  })
           .style('stroke', function(d,i,j){ return color(d, j, i); })
@@ -243,7 +250,6 @@ nv.models.multiBar = function() {
             });
             d3.event.stopPropagation();
           });
-
       bars
           .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
           .transition()
@@ -259,6 +265,10 @@ nv.models.multiBar = function() {
 
       if (stacked)
           bars.transition()
+            .delay(function(d,i) { 
+
+                  return i * delay / data[0].values.length;
+            })
             .attr('y', function(d,i) {
 
               return y((stacked ? d.y1 : 0));
@@ -272,6 +282,9 @@ nv.models.multiBar = function() {
             .attr('width', x.rangeBand() / (stacked ? 1 : data.length) );
       else
           bars.transition()
+            .delay(function(d,i) { 
+                return i * delay/ data[0].values.length;
+            })
             .attr('x', function(d,i) {
               return d.series * x.rangeBand() / data.length
             })