Merge pull request #1324 from Kreozot/redraw-transitions-fix

Fixed redraw animation bug when user quickly hide and show chart item

src/shape.bar.js

@@ -42,7 +42,7 @@ c3_chart_internal_fn.updateBar = function (durationForExit) {
 };
 c3_chart_internal_fn.redrawBar = function (drawBar, withTransition) {
     return [
-        (withTransition ? this.mainBar.transition() : this.mainBar)
+        (withTransition ? this.mainBar.transition(Math.random().toString()) : this.mainBar)
             .attr('d', drawBar)
             .style("fill", this.color)
             .style("opacity", 1)

src/shape.line.js

@@ -56,7 +56,7 @@ c3_chart_internal_fn.updateLine = function (durationForExit) {
 };
 c3_chart_internal_fn.redrawLine = function (drawLine, withTransition) {
     return [
-        (withTransition ? this.mainLine.transition() : this.mainLine)
+        (withTransition ? this.mainLine.transition(Math.random().toString()) : this.mainLine)
             .attr("d", drawLine)
             .style("stroke", this.color)
             .style("opacity", 1)
@@ -232,7 +232,7 @@ c3_chart_internal_fn.updateArea = function (durationForExit) {
 };
 c3_chart_internal_fn.redrawArea = function (drawArea, withTransition) {
     return [
-        (withTransition ? this.mainArea.transition() : this.mainArea)
+        (withTransition ? this.mainArea.transition(Math.random().toString()) : this.mainArea)
             .attr("d", drawArea)
             .style("fill", this.color)
             .style("opacity", this.orgAreaOpacity)
@@ -315,12 +315,12 @@ c3_chart_internal_fn.updateCircle = function () {
 c3_chart_internal_fn.redrawCircle = function (cx, cy, withTransition) {
     var selectedCircles = this.main.selectAll('.' + CLASS.selectedCircle);
     return [
-        (withTransition ? this.mainCircle.transition() : this.mainCircle)
+        (withTransition ? this.mainCircle.transition(Math.random().toString()) : this.mainCircle)
             .style('opacity', this.opacityForCircle.bind(this))
             .style("fill", this.color)
             .attr("cx", cx)
             .attr("cy", cy),
-        (withTransition ? selectedCircles.transition() : selectedCircles)
+        (withTransition ? selectedCircles.transition(Math.random().toString()) : selectedCircles)
             .attr("cx", cx)
             .attr("cy", cy)
     ];

src/subchart.js

@@ -98,7 +98,7 @@ c3_chart_internal_fn.updateBarForSubchart = function (durationForExit) {
         .remove();
 };
 c3_chart_internal_fn.redrawBarForSubchart = function (drawBarOnSub, withTransition, duration) {
-    (withTransition ? this.contextBar.transition().duration(duration) : this.contextBar)
+    (withTransition ? this.contextBar.transition(Math.random().toString()).duration(duration) : this.contextBar)
         .attr('d', drawBarOnSub)
         .style('opacity', 1);
 };
@@ -116,7 +116,7 @@ c3_chart_internal_fn.updateLineForSubchart = function (durationForExit) {
         .remove();
 };
 c3_chart_internal_fn.redrawLineForSubchart = function (drawLineOnSub, withTransition, duration) {
-    (withTransition ? this.contextLine.transition().duration(duration) : this.contextLine)
+    (withTransition ? this.contextLine.transition(Math.random().toString()).duration(duration) : this.contextLine)
         .attr("d", drawLineOnSub)
         .style('opacity', 1);
 };
@@ -135,7 +135,7 @@ c3_chart_internal_fn.updateAreaForSubchart = function (durationForExit) {
         .remove();
 };
 c3_chart_internal_fn.redrawAreaForSubchart = function (drawAreaOnSub, withTransition, duration) {
-    (withTransition ? this.contextArea.transition().duration(duration) : this.contextArea)
+    (withTransition ? this.contextArea.transition(Math.random().toString()).duration(duration) : this.contextArea)
         .attr("d", drawAreaOnSub)
         .style("fill", this.color)
         .style("opacity", this.orgAreaOpacity);