diff --git a/htdocs/samples/subchart_onbrush.html b/htdocs/samples/subchart_onbrush.html
index 2cd2158..ad77258 100644
--- a/htdocs/samples/subchart_onbrush.html
+++ b/htdocs/samples/subchart_onbrush.html
@@ -6,7 +6,7 @@
     <div id="chart1"></div>
     <div id="chart2"></div>
 
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 
diff --git a/htdocs/samples/zoom_onzoom.html b/htdocs/samples/zoom_onzoom.html
index f79e5ba..b059ec5 100644
--- a/htdocs/samples/zoom_onzoom.html
+++ b/htdocs/samples/zoom_onzoom.html
@@ -6,7 +6,7 @@
     <div id="chart1"></div>
     <div id="chart2"></div>
 
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 
diff --git a/src/subchart.js b/src/subchart.js
index 3220985..32017de 100644
--- a/src/subchart.js
+++ b/src/subchart.js
@@ -7,14 +7,10 @@ c3_chart_internal_fn.initBrush = function (scale) {
     // TODO: dynamically change brushY/brushX according to axis_rotated.
     $$.brush = ($$.config.axis_rotated ? d3.brushY() : d3.brushX()).on("brush", function () {
         if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") { return; }
-
-        // TODO: fix
-        var s = d3.event.selection || $$.brush.scale.range();
-        $$.main.select('.' + CLASS.eventRect).call($$.zoom.transform, d3.zoomIdentity
-                                 .scale($$.width / (s[1] - s[0]))
-                                 .translate(-s[0], 0));
-
         $$.redrawForBrush();
+    }).on("end", function () {
+        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") { return; }
+        if ($$.brush.empty() && d3.event.sourceEvent.type !== 'end') { $$.brush.clear(); }
     });
     $$.brush.updateExtent = function () {
         var range = this.scale.range(), extent;
@@ -35,6 +31,9 @@ c3_chart_internal_fn.initBrush = function (scale) {
         this.updateScale(scale || $$.subX).updateExtent();
         $$.context.select('.' + CLASS.brush).call(this);
     };
+    $$.brush.clear = function () {
+        $$.context.select('.' + CLASS.brush).call($$.brush.move, null);
+    };
     $$.brush.selection = function () {
         return d3.brushSelection($$.context.select('.' + CLASS.brush).node());
     };
@@ -227,7 +226,7 @@ c3_chart_internal_fn.redrawSubchart = function (withSubchart, transitions, durat
     }
 };
 c3_chart_internal_fn.redrawForBrush = function () {
-    var $$ = this, x = $$.x;
+    var $$ = this, x = $$.x, d3 = $$.d3, s;
     $$.redraw({
         withTransition: false,
         withY: $$.config.zoom_rescale,
@@ -236,6 +235,11 @@ c3_chart_internal_fn.redrawForBrush = function () {
         withEventRect: false,
         withDimension: false
     });
+    // update zoom transation binded to event rect
+    s = d3.event.selection || $$.brush.scale.range();
+    $$.main.select('.' + CLASS.eventRect).call($$.zoom.transform, d3.zoomIdentity
+                                               .scale($$.width / (s[1] - s[0]))
+                                               .translate(-s[0], 0));
     $$.config.subchart_onbrush.call($$.api, x.orgDomain());
 };
 c3_chart_internal_fn.transformContext = function (withTransition, transitions) {