diff --git a/src/arc.js b/src/arc.js
index 939950b..7e47bfb 100644
--- a/src/arc.js
+++ b/src/arc.js
@@ -254,14 +254,14 @@ c3_chart_internal_fn.getArcTitle = function () {
 
 c3_chart_internal_fn.updateTargetsForArc = function (targets) {
     var $$ = this, main = $$.main,
-        mainPieUpdate, mainPieEnter,
+        mainPies, mainPieEnter,
         classChartArc = $$.classChartArc.bind($$),
         classArcs = $$.classArcs.bind($$),
         classFocus = $$.classFocus.bind($$);
-    mainPieUpdate = main.select('.' + CLASS.chartArcs).selectAll('.' + CLASS.chartArc)
+    mainPies = main.select('.' + CLASS.chartArcs).selectAll('.' + CLASS.chartArc)
         .data($$.pie(targets))
         .attr("class", function (d) { return classChartArc(d) + classFocus(d.data); });
-    mainPieEnter = mainPieUpdate.enter().append("g")
+    mainPieEnter = mainPies.enter().append("g")
         .attr("class", classChartArc);
     mainPieEnter.append('g')
         .attr('class', classArcs);
@@ -287,10 +287,10 @@ c3_chart_internal_fn.initArc = function () {
 
 c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransform) {
     var $$ = this, d3 = $$.d3, config = $$.config, main = $$.main,
-        mainArc;
-    mainArc = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc)
+        arcs, mainArc;
+    arcs = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc)
         .data($$.arcData.bind($$));
-    mainArc.enter().append('path')
+    mainArc = arcs.enter().append('path')
         .attr("class", $$.classArc.bind($$))
         .style("fill", function (d) { return $$.color(d.data); })
         .style("cursor", function (d) { return config.interaction_enabled && config.data_selection_isselectable(d) ? "pointer" : null; })
@@ -299,7 +299,8 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
                 d.startAngle = d.endAngle = config.gauge_startingAngle;
             }
             this._current = d;
-        });
+        })
+        .merge(arcs);
     mainArc
         .attr("transform", function (d) { return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; })
         .on('mouseover', config.interaction_enabled ? function (d) {
@@ -385,7 +386,7 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
         .call($$.endall, function () {
             $$.transiting = false;
         });
-    mainArc.exit().transition().duration(durationForExit)
+    arcs.exit().transition().duration(durationForExit)
         .style('opacity', 0)
         .remove();
     main.selectAll('.' + CLASS.chartArc).select('text')
diff --git a/src/core.js b/src/core.js
index 7e6b04b..72e3dac 100644
--- a/src/core.js
+++ b/src/core.js
@@ -999,7 +999,7 @@ c3_chart_internal_fn.endall = function (transition, callback) {
     var n = 0;
     transition
         .each(function () { ++n; })
-        .each("end", function () {
+        .on("end", function () {
             if (!--n) { callback.apply(this, arguments); }
         });
 };
diff --git a/src/grid.js b/src/grid.js
index ddf417e..2a6577a 100644
--- a/src/grid.js
+++ b/src/grid.js
@@ -48,28 +48,29 @@ c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
         'y2': $$.height
     };
 
-    $$.xgrid = $$.main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid)
+    var xgrids = $$.main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid)
         .data(xgridData);
-    $$.xgrid.enter().append('line').attr("class", CLASS.xgrid);
+    $$.xgrid = xgrids.enter().append('line').attr("class", CLASS.xgrid).merge(xgrids);
     if (!withoutUpdate) {
         $$.xgrid.attr($$.xgridAttr)
             .style("opacity", function () { return +d3.select(this).attr(config.axis_rotated ? 'y1' : 'x1') === (config.axis_rotated ? $$.height : 0) ? 0 : 1; });
     }
-    $$.xgrid.exit().remove();
+    xgrids.exit().remove();
 };
 
 c3_chart_internal_fn.updateYGrid = function () {
     var $$ = this, config = $$.config,
         gridValues = $$.yAxis.tickValues() || $$.y.ticks(config.grid_y_ticks);
-    $$.ygrid = $$.main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid)
+    var ygrids = $$.main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid)
         .data(gridValues);
-    $$.ygrid.enter().append('line')
-        .attr('class', CLASS.ygrid);
+    $$.ygrid = ygrids.enter().append('line')
+        .attr('class', CLASS.ygrid)
+        .merge(ygrids);
     $$.ygrid.attr("x1", config.axis_rotated ? $$.y : 0)
         .attr("x2", config.axis_rotated ? $$.y : $$.width)
         .attr("y1", config.axis_rotated ? 0 : $$.y)
         .attr("y2", config.axis_rotated ? $$.height : $$.y);
-    $$.ygrid.exit().remove();
+    ygrids.exit().remove();
     $$.smoothLines($$.ygrid, 'grid');
 };
 
@@ -87,7 +88,7 @@ c3_chart_internal_fn.yGridTextX = function (d) {
 };
 c3_chart_internal_fn.updateGrid = function (duration) {
     var $$ = this, main = $$.main, config = $$.config,
-        xgridLine, ygridLine, yv;
+        xgridLine, xgridLineEnter, ygridLine, ygridLineEnter, yv;
 
     // hide if arc type
     $$.grid.style('visibility', $$.hasArcType() ? 'hidden' : 'visible');
@@ -96,23 +97,24 @@ c3_chart_internal_fn.updateGrid = function (duration) {
     if (config.grid_x_show) {
         $$.updateXGrid();
     }
-    $$.xgridLines = main.select('.' + CLASS.xgridLines).selectAll('.' + CLASS.xgridLine)
+    xgridLine = main.select('.' + CLASS.xgridLines).selectAll('.' + CLASS.xgridLine)
         .data(config.grid_x_lines);
     // enter
-    xgridLine = $$.xgridLines.enter().append('g')
+    xgridLineEnter = xgridLine.enter().append('g')
         .attr("class", function (d) { return CLASS.xgridLine + (d['class'] ? ' ' + d['class'] : ''); });
-    xgridLine.append('line')
+    xgridLineEnter.append('line')
         .style("opacity", 0);
-    xgridLine.append('text')
+    xgridLineEnter.append('text')
         .attr("text-anchor", $$.gridTextAnchor)
         .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
         .attr('dx', $$.gridTextDx)
         .attr('dy', -5)
         .style("opacity", 0);
     // udpate
+    $$.xgridLines = xgridLineEnter.merge(xgridLine);
     // done in d3.transition() of the end of this function
     // exit
-    $$.xgridLines.exit().transition().duration(duration)
+    xgridLine.exit().transition().duration(duration)
         .style("opacity", 0)
         .remove();
 
@@ -120,20 +122,21 @@ c3_chart_internal_fn.updateGrid = function (duration) {
     if (config.grid_y_show) {
         $$.updateYGrid();
     }
-    $$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
+    ygridLine = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
         .data(config.grid_y_lines);
     // enter
-    ygridLine = $$.ygridLines.enter().append('g')
+    ygridLineEnter = ygridLine.enter().append('g')
         .attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
-    ygridLine.append('line')
+    ygridLineEnter.append('line')
         .style("opacity", 0);
-    ygridLine.append('text')
+    ygridLineEnter.append('text')
         .attr("text-anchor", $$.gridTextAnchor)
         .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
         .attr('dx', $$.gridTextDx)
         .attr('dy', -5)
         .style("opacity", 0);
     // update
+    $$.ygridLines = ygridLineEnter.merge(ygridLine);
     yv = $$.yv.bind($$);
     $$.ygridLines.select('line')
       .transition().duration(duration)
@@ -149,7 +152,7 @@ c3_chart_internal_fn.updateGrid = function (duration) {
         .text(function (d) { return d.text; })
         .style("opacity", 1);
     // exit
-    $$.ygridLines.exit().transition().duration(duration)
+    ygridLine.exit().transition().duration(duration)
         .style("opacity", 0)
         .remove();
 };
diff --git a/src/shape.bar.js b/src/shape.bar.js
index e71f89f..208161b 100644
--- a/src/shape.bar.js
+++ b/src/shape.bar.js
@@ -9,14 +9,14 @@ c3_chart_internal_fn.initBar = function () {
 };
 c3_chart_internal_fn.updateTargetsForBar = function (targets) {
     var $$ = this, config = $$.config,
-        mainBarUpdate, mainBarEnter,
+        mainBars, mainBarEnter,
         classChartBar = $$.classChartBar.bind($$),
         classBars = $$.classBars.bind($$),
         classFocus = $$.classFocus.bind($$);
-    mainBarUpdate = $$.main.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar)
+    mainBars = $$.main.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar)
         .data(targets)
         .attr('class', function (d) { return classChartBar(d) + classFocus(d); });
-    mainBarEnter = mainBarUpdate.enter().append('g')
+    mainBarEnter = mainBars.enter().append('g')
         .attr('class', classChartBar)
         .style("pointer-events", "none");
     // Bars for each data
@@ -31,15 +31,16 @@ c3_chart_internal_fn.updateBar = function (durationForExit) {
         classBar = $$.classBar.bind($$),
         initialOpacity = $$.initialOpacity.bind($$),
         color = function (d) { return $$.color(d.id); };
-    $$.mainBar = $$.main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
+    var bars = $$.main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
         .data(barData);
-    $$.mainBar.enter().append('path')
+    $$.mainBar = bars.enter().append('path')
         .attr("class", classBar)
         .style("stroke", color)
-        .style("fill", color);
+        .style("fill", color)
+        .merge(bars);
     $$.mainBar
         .style("opacity", initialOpacity);
-    $$.mainBar.exit().transition().duration(durationForExit)
+    bars.exit().transition().duration(durationForExit)
         .remove();
 };
 c3_chart_internal_fn.redrawBar = function (drawBar, withTransition) {
diff --git a/src/shape.line.js b/src/shape.line.js
index d3ade86..2b4a6e3 100644
--- a/src/shape.line.js
+++ b/src/shape.line.js
@@ -9,16 +9,16 @@ c3_chart_internal_fn.initLine = function () {
 };
 c3_chart_internal_fn.updateTargetsForLine = function (targets) {
     var $$ = this, config = $$.config,
-        mainLineUpdate, mainLineEnter,
+        mainLines, mainLineEnter,
         classChartLine = $$.classChartLine.bind($$),
         classLines = $$.classLines.bind($$),
         classAreas = $$.classAreas.bind($$),
         classCircles = $$.classCircles.bind($$),
         classFocus = $$.classFocus.bind($$);
-    mainLineUpdate = $$.main.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
+    mainLines = $$.main.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
         .data(targets)
         .attr('class', function (d) { return classChartLine(d) + classFocus(d); });
-    mainLineEnter = mainLineUpdate.enter().append('g')
+    mainLineEnter = mainLines.enter().append('g')
         .attr('class', classChartLine)
         .style('opacity', 0)
         .style("pointer-events", "none");
@@ -45,17 +45,17 @@ c3_chart_internal_fn.updateTargetsForLine = function (targets) {
 };
 c3_chart_internal_fn.updateLine = function (durationForExit) {
     var $$ = this;
-    $$.mainLine = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
+    var lines = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
         .data($$.lineData.bind($$));
-    $$.mainLine = $$.mainLine.enter().append('path')
+    $$.mainLine = lines.enter().append('path')
         .attr('class', $$.classLine.bind($$))
         .style("stroke", $$.color)
-        .merge($$.mainLine);
+        .merge(lines);
     $$.mainLine
         .style("opacity", $$.initialOpacity.bind($$))
         .style('shape-rendering', function (d) { return $$.isStepType(d) ? 'crispEdges' : ''; })
         .attr('transform', null);
-    $$.mainLine.exit().transition().duration(durationForExit)
+    lines.exit().transition().duration(durationForExit)
         .style('opacity', 0)
         .remove();
 };
@@ -223,15 +223,15 @@ c3_chart_internal_fn.lineWithRegions = function (d, x, y, _regions) {
 
 c3_chart_internal_fn.updateArea = function (durationForExit) {
     var $$ = this, d3 = $$.d3;
-    $$.mainArea = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
+    var areas = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
         .data($$.lineData.bind($$));
-    $$.mainArea = $$.mainArea.enter().append('path')
+    $$.mainArea = areas.enter().append('path')
         .attr("class", $$.classArea.bind($$))
         .style("fill", $$.color)
-        .style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; }).merge($$.mainArea);
+        .style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; }).merge(areas);
     $$.mainArea
         .style("opacity", $$.orgAreaOpacity);
-    $$.mainArea.exit().transition().duration(durationForExit)
+    areas.exit().transition().duration(durationForExit)
         .style('opacity', 0)
         .remove();
 };