Fix Remaining Transitions

Fixes #1758

This is the same fix applied in #1324

src/axis.js

@@ -303,17 +303,17 @@ Axis.prototype.updateLabels = function updateLabels(withTransition) {
     var axisXLabel = $$.main.select('.' + CLASS.axisX + ' .' + CLASS.axisXLabel),
         axisYLabel = $$.main.select('.' + CLASS.axisY + ' .' + CLASS.axisYLabel),
         axisY2Label = $$.main.select('.' + CLASS.axisY2 + ' .' + CLASS.axisY2Label);
-    (withTransition ? axisXLabel.transition() : axisXLabel)
+    (withTransition ? axisXLabel.transition(Math.random().toString()) : axisXLabel)
         .attr("x", this.xForXAxisLabel.bind(this))
         .attr("dx", this.dxForXAxisLabel.bind(this))
         .attr("dy", this.dyForXAxisLabel.bind(this))
         .text(this.textForXAxisLabel.bind(this));
-    (withTransition ? axisYLabel.transition() : axisYLabel)
+    (withTransition ? axisYLabel.transition(Math.random().toString()) : axisYLabel)
         .attr("x", this.xForYAxisLabel.bind(this))
         .attr("dx", this.dxForYAxisLabel.bind(this))
         .attr("dy", this.dyForYAxisLabel.bind(this))
         .text(this.textForYAxisLabel.bind(this));
-    (withTransition ? axisY2Label.transition() : axisY2Label)
+    (withTransition ? axisY2Label.transition(Math.random().toString()) : axisY2Label)
         .attr("x", this.xForY2AxisLabel.bind(this))
         .attr("dx", this.dxForY2AxisLabel.bind(this))
         .attr("dy", this.dyForY2AxisLabel.bind(this))

src/grid.js

@@ -154,13 +154,13 @@ c3_chart_internal_fn.redrawGrid = function (withTransition) {
         lines = $$.xgridLines.select('line'),
         texts = $$.xgridLines.select('text');
     return [
-        (withTransition ? lines.transition() : lines)
+        (withTransition ? lines.transition(Math.random().toString()) : lines)
             .attr("x1", config.axis_rotated ? 0 : xv)
             .attr("x2", config.axis_rotated ? $$.width : xv)
             .attr("y1", config.axis_rotated ? xv : 0)
             .attr("y2", config.axis_rotated ? xv : $$.height)
             .style("opacity", 1),
-        (withTransition ? texts.transition() : texts)
+        (withTransition ? texts.transition(Math.random().toString()) : texts)
             .attr("x", config.axis_rotated ? $$.yGridTextX.bind($$) : $$.xGridTextX.bind($$))
             .attr("y", xv)
             .text(function (d) { return d.text; })

src/legend.js

@@ -292,13 +292,13 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
         .data(targetIds)
         .text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; }) // MEMO: needed for update
         .each(function (id, i) { updatePositions(this, id, i); });
-    (withTransition ? texts.transition() : texts)
+    (withTransition ? texts.transition(Math.random().toString()) : texts)
         .attr('x', xForLegendText)
         .attr('y', yForLegendText);
 
     rects = $$.legend.selectAll('rect.' + CLASS.legendItemEvent)
         .data(targetIds);
-    (withTransition ? rects.transition() : rects)
+    (withTransition ? rects.transition(Math.random().toString()) : rects)
         .attr('width', function (id) { return widths[id]; })
         .attr('height', function (id) { return heights[id]; })
         .attr('x', xForLegendRect)
@@ -306,7 +306,7 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
 
     tiles = $$.legend.selectAll('line.' + CLASS.legendItemTile)
             .data(targetIds);
-        (withTransition ? tiles.transition() : tiles)
+        (withTransition ? tiles.transition(Math.random().toString()) : tiles)
             .style('stroke', $$.color)
             .attr('x1', x1ForLegendTile)
             .attr('y1', yForLegendTile)
@@ -314,7 +314,7 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
             .attr('y2', yForLegendTile);
 
     if (background) {
-        (withTransition ? background.transition() : background)
+        (withTransition ? background.transition(Math.random().toString()) : background)
             .attr('height', $$.getLegendHeight() - 12)
             .attr('width', maxWidth * (step + 1) + 10);
     }

src/region.js

@@ -35,7 +35,7 @@ c3_chart_internal_fn.redrawRegion = function (withTransition) {
         w = $$.regionWidth.bind($$),
         h = $$.regionHeight.bind($$);
     return [
-        (withTransition ? regions.transition() : regions)
+        (withTransition ? regions.transition(Math.random().toString()) : regions)
             .attr("x", x)
             .attr("y", y)
             .attr("width", w)

src/text.js

@@ -40,7 +40,7 @@ c3_chart_internal_fn.updateText = function (durationForExit) {
 };
 c3_chart_internal_fn.redrawText = function (xForText, yForText, forFlow, withTransition) {
     return [
-        (withTransition ? this.mainText.transition() : this.mainText)
+        (withTransition ? this.mainText.transition(Math.random().toString()) : this.mainText)
             .attr('x', xForText)
             .attr('y', yForText)
             .style("fill", this.color)