Fix event rect when flow called - #520

c3.js

@@ -82,6 +82,7 @@
 
         $$.dragStart = null;
         $$.dragging = false;
+        $$.flowing = false;
         $$.cancelClick = false;
         $$.mouseover = false;
         $$.transiting = false;
@@ -555,8 +556,8 @@
             .selectAll('circle')
             .remove();
 
-        // event rect
+        // event rects will redrawn when flow called
-        if (config.interaction_enabled) {
+        if (config.interaction_enabled && !options.flow) {
             $$.redrawEventRect();
         }
 
@@ -2103,7 +2104,7 @@
             .on('mouseover', function (d) {
                 var index = d.index, selectedData, newData;
 
-                if ($$.dragging) { return; } // do nothing if dragging
+                if ($$.dragging || $$.flowing) { return; } // do nothing while dragging/flowing
                 if ($$.hasArcType()) { return; }
 
                 selectedData = $$.data.targets.map(function (t) {
@@ -2149,7 +2150,7 @@
                 var selectedData, index = d.index,
                     eventRect = $$.svg.select('.' + CLASS.eventRect + '-' + index);
 
-                if ($$.dragging) { return; } // do nothing when dragging
+                if ($$.dragging || $$.flowing) { return; } // do nothing while dragging/flowing
                 if ($$.hasArcType()) { return; }
 
                 if ($$.isStepType(d) && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
@@ -5662,6 +5663,9 @@
                 mainArea = $$.mainArea || d3.selectAll([]),
                 mainCircle = $$.mainCircle || d3.selectAll([]);
 
+            // set flag
+            $$.flowing = true;
+
             // remove head data after rendered
             $$.data.targets.forEach(function (d) {
                 d.values.splice(0, flowLength);
@@ -5697,6 +5701,10 @@
             scaleX = (diffDomain(orgDomain) / diffDomain(domain));
             transform = 'translate(' + translateX + ',0) scale(' + scaleX + ',1)';
 
+            // hide tooltip
+            $$.hideXGridFocus();
+            $$.hideTooltip();
+
             d3.transition().ease('linear').duration(durationForFlow).each(function () {
                 wait.add($$.axes.x.transition().call($$.xAxis));
                 wait.add(mainBar.transition().attr('transform', transform));
@@ -5759,10 +5767,15 @@
                 mainRegion.select('rect').filter($$.isRegionOnX)
                     .attr("x", $$.regionX.bind($$))
                     .attr("width", $$.regionWidth.bind($$));
-                $$.updateEventRect();
+
+                if (config.interaction_enabled) {
+                    $$.redrawEventRect();
+                }
 
                 // callback for end of flow
                 done();
+
+                $$.flowing = false;
             });
         };
     };

src/api.flow.js

@@ -175,6 +175,9 @@ c3_chart_internal_fn.generateFlow = function (args) {
             mainArea = $$.mainArea || d3.selectAll([]),
             mainCircle = $$.mainCircle || d3.selectAll([]);
 
+        // set flag
+        $$.flowing = true;
+
         // remove head data after rendered
         $$.data.targets.forEach(function (d) {
             d.values.splice(0, flowLength);
@@ -210,6 +213,10 @@ c3_chart_internal_fn.generateFlow = function (args) {
         scaleX = (diffDomain(orgDomain) / diffDomain(domain));
         transform = 'translate(' + translateX + ',0) scale(' + scaleX + ',1)';
 
+        // hide tooltip
+        $$.hideXGridFocus();
+        $$.hideTooltip();
+
         d3.transition().ease('linear').duration(durationForFlow).each(function () {
             wait.add($$.axes.x.transition().call($$.xAxis));
             wait.add(mainBar.transition().attr('transform', transform));
@@ -272,10 +279,15 @@ c3_chart_internal_fn.generateFlow = function (args) {
             mainRegion.select('rect').filter($$.isRegionOnX)
                 .attr("x", $$.regionX.bind($$))
                 .attr("width", $$.regionWidth.bind($$));
-            $$.updateEventRect();
+
+            if (config.interaction_enabled) {
+                $$.redrawEventRect();
+            }
 
             // callback for end of flow
             done();
+
+            $$.flowing = false;
         });
     };
 };

src/core.js

@@ -77,6 +77,7 @@ c3_chart_internal_fn.initParams = function () {
 
     $$.dragStart = null;
     $$.dragging = false;
+    $$.flowing = false;
     $$.cancelClick = false;
     $$.mouseover = false;
     $$.transiting = false;
@@ -550,8 +551,8 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
         .selectAll('circle')
         .remove();
 
-    // event rect
+    // event rects will redrawn when flow called
-    if (config.interaction_enabled) {
+    if (config.interaction_enabled && !options.flow) {
         $$.redrawEventRect();
     }
 

src/interaction.js

@@ -109,7 +109,7 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
         .on('mouseover', function (d) {
             var index = d.index, selectedData, newData;
 
-            if ($$.dragging) { return; } // do nothing if dragging
+            if ($$.dragging || $$.flowing) { return; } // do nothing while dragging/flowing
             if ($$.hasArcType()) { return; }
 
             selectedData = $$.data.targets.map(function (t) {
@@ -155,7 +155,7 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
             var selectedData, index = d.index,
                 eventRect = $$.svg.select('.' + CLASS.eventRect + '-' + index);
 
-            if ($$.dragging) { return; } // do nothing when dragging
+            if ($$.dragging || $$.flowing) { return; } // do nothing while dragging/flowing
             if ($$.hasArcType()) { return; }
 
             if ($$.isStepType(d) && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {