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
})