diff --git a/htdocs/index.html b/htdocs/index.html
index cb88440..d1670d7 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -182,9 +182,9 @@
               </a>
             </div>
             <div class="col-md-4">
-              <h3>Default X Extent</h3>
-              <a href="./samples/axes_x_extent.html">
-                Set default x extent
+              <h3>Default X Selection</h3>
+              <a href="./samples/axes_x_selection.html">
+                Set default x selection
               </a>
             </div>
           </div>
@@ -368,7 +368,7 @@
               <a href="./samples/zoom.html">
                 Enable zoom
               </a>
-              <a href="./samples/zoom.html">
+              <a href="./samples/zoom_category.html">
                 Zoom on category axis
               </a>
               <a href="./samples/zoom_reduction.html">
@@ -470,6 +470,12 @@
                 Show tooltip programmatically
               </a>
             </div>
+            <div class="col-md-4">
+              <h3>Zoom</h3>
+              <a href="./samples/api_zoom.html">
+                Zoom programmatically
+              </a>
+            </div>
           </div>
         </div>
       </div>
diff --git a/htdocs/samples/api_axis_label.html b/htdocs/samples/api_axis_label.html
index b53de6a..b9c2deb 100644
--- a/htdocs/samples/api_axis_label.html
+++ b/htdocs/samples/api_axis_label.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/api_axis_range.html b/htdocs/samples/api_axis_range.html
index daa7843..5b4a9bc 100644
--- a/htdocs/samples/api_axis_range.html
+++ b/htdocs/samples/api_axis_range.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/api_data_colors.html b/htdocs/samples/api_data_colors.html
index 755341a..d273112 100644
--- a/htdocs/samples/api_data_colors.html
+++ b/htdocs/samples/api_data_colors.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/api_flow.html b/htdocs/samples/api_flow.html
index 363faf5..2c8778c 100644
--- a/htdocs/samples/api_flow.html
+++ b/htdocs/samples/api_flow.html
@@ -11,7 +11,7 @@
   <body>
     <div id="chart"></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/api_flow_timeseries.html b/htdocs/samples/api_flow_timeseries.html
index 216d7e4..e1b0feb 100644
--- a/htdocs/samples/api_flow_timeseries.html
+++ b/htdocs/samples/api_flow_timeseries.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
 
@@ -85,7 +85,6 @@
       }, 4000);
 
       setTimeout(function () {
-        console.log("Flow 1");
         chart.flow({
           columns: [
             ['x', '2013-03-01', '2013-03-08'],
diff --git a/htdocs/samples/api_legend.html b/htdocs/samples/api_legend.html
index dfc6994..588a92c 100644
--- a/htdocs/samples/api_legend.html
+++ b/htdocs/samples/api_legend.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/api_tooltip_show.html b/htdocs/samples/api_tooltip_show.html
index b4a82b5..5f81d12 100644
--- a/htdocs/samples/api_tooltip_show.html
+++ b/htdocs/samples/api_tooltip_show.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
@@ -14,25 +14,48 @@
             ['data1', 30, 200, 100, 400, 150, 250],
             ['data2', 50, 20, 10, 40, 15, 25]
           ],
+        },
+        zoom: {
+            enabled: true,
+            initialRange: [0.8,3.2],
         }
       });
 
       setTimeout(function () {
-        chart.tooltip.show({ x: 1 });
+        chart.tooltip.show({ x: 2 });
       }, 1000);
 
       setTimeout(function () {
-        chart.tooltip.show({ index: 3 });
+        chart.tooltip.show({ x: 1 });
       }, 2000);
 
       setTimeout(function () {
-        chart.tooltip.show({ data: {x: 2} });
+        chart.tooltip.show({ data: {x: 3, id: 'data1', value: 400} });
       }, 3000);
 
       setTimeout(function () {
         chart.tooltip.hide();
       }, 4000);
 
+      setTimeout(function () {
+        chart.internal.config.tooltip_grouped = false;
+        chart.tooltip.show({ x: 2 });
+      }, 5000);
+
+      setTimeout(function () {
+//        chart.internal.config.tooltip_grouped = false;
+        chart.tooltip.show({ x: 1, id: 'data2' });
+      }, 6000);
+
+      setTimeout(function () {
+//        chart.internal.config.tooltip_grouped = false;
+        chart.tooltip.show({ data: {x: 3, id: 'data1', value: 400} });
+      }, 7000);
+
+      setTimeout(function () {
+        chart.tooltip.hide();
+      }, 8000);
+
     </script>
   </body>
 </html>
diff --git a/htdocs/samples/api_transform.html b/htdocs/samples/api_transform.html
index 4a85426..fd763e2 100644
--- a/htdocs/samples/api_transform.html
+++ b/htdocs/samples/api_transform.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/api_xgrid_lines.html b/htdocs/samples/api_xgrid_lines.html
index 661d111..b80a591 100644
--- a/htdocs/samples/api_xgrid_lines.html
+++ b/htdocs/samples/api_xgrid_lines.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/api_ygrid_lines.html b/htdocs/samples/api_ygrid_lines.html
index 57784ed..e58021f 100644
--- a/htdocs/samples/api_ygrid_lines.html
+++ b/htdocs/samples/api_ygrid_lines.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
@@ -20,7 +20,7 @@
         },
         grid: {
           y: {
-//            lines: [{value: 30, text:'Label 30'}, {value: 250, text: 'Label 250'}]
+            lines: [{value: 30, text:'Label 30'}, {value: 250, text: 'Label 250'}]
           }
         }
       });
diff --git a/htdocs/samples/api_zoom.html b/htdocs/samples/api_zoom.html
new file mode 100644
index 0000000..d0a349b
--- /dev/null
+++ b/htdocs/samples/api_zoom.html
@@ -0,0 +1,76 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          columns: [
+            generateData(100)
+          ],
+        },
+        zoom: {
+          enabled: true,
+          initialRange: [30, 60],
+          onzoomstart: function (event) {
+            console.log("onzoomstart", event);
+          },
+          onzoom: function (domain) {
+            console.log("onzoom", domain);
+          },
+          onzoomend: function (domain) {
+            console.log("onzoomend", domain);
+          },
+        },
+        subchart: { show: true }
+      });
+
+      function generateData(n) {
+        var column = ['sample'];
+        for (var i = 0; i < n; i++) {
+          column.push(Math.random() * 500);
+        }
+        return column;
+      }
+
+     // with subchart
+     setTimeout(function () {
+         chart.zoom([45,75]);
+     }, 1000);
+
+     setTimeout(function () {
+         chart.zoom([25,90]);
+     }, 2000);
+
+     setTimeout(function () {
+         chart.unzoom();
+     }, 3000);
+
+     // without subchart
+     setTimeout(function () {
+         chart.internal.config.subchart_show = false;
+         chart.flush();
+     }, 4000);
+
+     setTimeout(function () {
+         chart.zoom([45,75]);
+     }, 5000);
+
+     setTimeout(function () {
+         chart.zoom([25,90]);
+     }, 6000);
+
+     setTimeout(function () {
+         chart.unzoom();
+     }, 7000);
+
+    </script>
+  </body>
+</html>
diff --git a/htdocs/samples/area_zerobased.html b/htdocs/samples/area_zerobased.html
index f7975c9..9aeceec 100644
--- a/htdocs/samples/area_zerobased.html
+++ b/htdocs/samples/area_zerobased.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/axes_padding.html b/htdocs/samples/axes_padding.html
index c562a4a..b3e4fe7 100644
--- a/htdocs/samples/axes_padding.html
+++ b/htdocs/samples/axes_padding.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/axes_range.html b/htdocs/samples/axes_range.html
index 732200a..5c5edd1 100644
--- a/htdocs/samples/axes_range.html
+++ b/htdocs/samples/axes_range.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/axes_x_range_timeseries.html b/htdocs/samples/axes_x_range_timeseries.html
index 4b98bb9..4486444 100644
--- a/htdocs/samples/axes_x_range_timeseries.html
+++ b/htdocs/samples/axes_x_range_timeseries.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/axes_x_extent.html b/htdocs/samples/axes_x_selection.html
similarity index 89%
rename from htdocs/samples/axes_x_extent.html
rename to htdocs/samples/axes_x_selection.html
index b433824..a71d36e 100644
--- a/htdocs/samples/axes_x_extent.html
+++ b/htdocs/samples/axes_x_selection.html
@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></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>
 
@@ -21,7 +21,7 @@
         },
         axis: {
           x: {
-            extent: [2, 4.5]
+            selection: [2, 4.5]
           }
         },
         subchart: {
@@ -42,7 +42,7 @@
         axis: {
           x: {
             type: 'timeseries',
-            extent: ['2014-03-01', '2014-04-20']
+            selection: ['2014-03-01', '2014-04-20']
           }
         },
         subchart: {
@@ -60,7 +60,7 @@
         },
         axis: {
           x: {
-            extent: [1, 4.2]
+            selection: [1, 4.2]
           }
         },
         zoom: {
diff --git a/htdocs/samples/axes_x_tick_culling.html b/htdocs/samples/axes_x_tick_culling.html
index f0f54ca..d21bc92 100644
--- a/htdocs/samples/axes_x_tick_culling.html
+++ b/htdocs/samples/axes_x_tick_culling.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/axes_x_tick_fit.html b/htdocs/samples/axes_x_tick_fit.html
index 5f8ed36..3854560 100644
--- a/htdocs/samples/axes_x_tick_fit.html
+++ b/htdocs/samples/axes_x_tick_fit.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/axes_x_tick_rotate.html b/htdocs/samples/axes_x_tick_rotate.html
index 9cfb531..c226455 100644
--- a/htdocs/samples/axes_x_tick_rotate.html
+++ b/htdocs/samples/axes_x_tick_rotate.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/axes_x_tick_values.html b/htdocs/samples/axes_x_tick_values.html
index c8922e6..2afaf76 100644
--- a/htdocs/samples/axes_x_tick_values.html
+++ b/htdocs/samples/axes_x_tick_values.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/axes_y2.html b/htdocs/samples/axes_y2.html
index e146c6c..52452e4 100644
--- a/htdocs/samples/axes_y2.html
+++ b/htdocs/samples/axes_y2.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/axes_y_default.html b/htdocs/samples/axes_y_default.html
index 50119eb..205443e 100644
--- a/htdocs/samples/axes_y_default.html
+++ b/htdocs/samples/axes_y_default.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/bar_zerobased.html b/htdocs/samples/bar_zerobased.html
index 55d02a8..f4a32d1 100644
--- a/htdocs/samples/bar_zerobased.html
+++ b/htdocs/samples/bar_zerobased.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/bindto.html b/htdocs/samples/bindto.html
index 14e813d..4a9fffc 100644
--- a/htdocs/samples/bindto.html
+++ b/htdocs/samples/bindto.html
@@ -7,7 +7,7 @@
     <div class="chart2" style="height:150px;"></div>
     <div class="chart3" style="height:150px;"></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>
       var chart1 = c3.generate({
diff --git a/htdocs/samples/categorized.html b/htdocs/samples/categorized.html
index 0e4a1b5..d94aebe 100644
--- a/htdocs/samples/categorized.html
+++ b/htdocs/samples/categorized.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>
 
@@ -15,7 +15,7 @@
         data: {
           x: 'x',
           columns: [
-            ['x', '1e-3', '1e-2', '1'],
+            ['x', '1e-3', '1e-2', '1', 'kjlsdjfl lksl lk jlsjflk lskj lskdfjlk lksdfjlskdj lks'],
             ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
           ]
         },
diff --git a/htdocs/samples/chart_area.html b/htdocs/samples/chart_area.html
index 04ec6bd..fea0460 100644
--- a/htdocs/samples/chart_area.html
+++ b/htdocs/samples/chart_area.html
@@ -14,7 +14,7 @@
     <h3>+/- vaulues</h3>
     <div id="chart5"></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/chart_area_spline.html b/htdocs/samples/chart_area_spline.html
index 836474a..07523db 100644
--- a/htdocs/samples/chart_area_spline.html
+++ b/htdocs/samples/chart_area_spline.html
@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></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/chart_area_spline_stacked.html b/htdocs/samples/chart_area_spline_stacked.html
index a5448cb..65c0855 100644
--- a/htdocs/samples/chart_area_spline_stacked.html
+++ b/htdocs/samples/chart_area_spline_stacked.html
@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></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/chart_area_stacked.html b/htdocs/samples/chart_area_stacked.html
index 9830d94..7f5be64 100644
--- a/htdocs/samples/chart_area_stacked.html
+++ b/htdocs/samples/chart_area_stacked.html
@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></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/chart_area_step.html b/htdocs/samples/chart_area_step.html
index 2ba7a27..42f166e 100644
--- a/htdocs/samples/chart_area_step.html
+++ b/htdocs/samples/chart_area_step.html
@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></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/chart_area_step_stacked.html b/htdocs/samples/chart_area_step_stacked.html
index ce470e4..b9409c3 100644
--- a/htdocs/samples/chart_area_step_stacked.html
+++ b/htdocs/samples/chart_area_step_stacked.html
@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></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/chart_bar.html b/htdocs/samples/chart_bar.html
index 1f19af7..43b694d 100644
--- a/htdocs/samples/chart_bar.html
+++ b/htdocs/samples/chart_bar.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/chart_bar_space.html b/htdocs/samples/chart_bar_space.html
index 00e48a9..012bf2b 100644
--- a/htdocs/samples/chart_bar_space.html
+++ b/htdocs/samples/chart_bar_space.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/chart_bar_stacked.html b/htdocs/samples/chart_bar_stacked.html
index d47fdd7..aa0ad42 100644
--- a/htdocs/samples/chart_bar_stacked.html
+++ b/htdocs/samples/chart_bar_stacked.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/chart_combination.html b/htdocs/samples/chart_combination.html
index 42eb59a..5ddfbc1 100644
--- a/htdocs/samples/chart_combination.html
+++ b/htdocs/samples/chart_combination.html
@@ -5,8 +5,8 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
         data: {
diff --git a/htdocs/samples/chart_donut.html b/htdocs/samples/chart_donut.html
index d8453d3..3934131 100644
--- a/htdocs/samples/chart_donut.html
+++ b/htdocs/samples/chart_donut.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/chart_gauge.html b/htdocs/samples/chart_gauge.html
index 2cf7d8d..b1c59bb 100644
--- a/htdocs/samples/chart_gauge.html
+++ b/htdocs/samples/chart_gauge.html
@@ -8,7 +8,7 @@
     <div id="chart2"></div>
     <div id="chart3"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/chart_multi_arc_gauge.html b/htdocs/samples/chart_multi_arc_gauge.html
index f2fe72b..5e6a4fc 100644
--- a/htdocs/samples/chart_multi_arc_gauge.html
+++ b/htdocs/samples/chart_multi_arc_gauge.html
@@ -4,7 +4,7 @@
   </head>
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/chart_pie.html b/htdocs/samples/chart_pie.html
index e9b7ccb..00cb3fb 100644
--- a/htdocs/samples/chart_pie.html
+++ b/htdocs/samples/chart_pie.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/chart_pie_sort.html b/htdocs/samples/chart_pie_sort.html
index ca875b8..cff8296 100644
--- a/htdocs/samples/chart_pie_sort.html
+++ b/htdocs/samples/chart_pie_sort.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/chart_scatter.html b/htdocs/samples/chart_scatter.html
index 0afe1da..0931308 100644
--- a/htdocs/samples/chart_scatter.html
+++ b/htdocs/samples/chart_scatter.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/chart_spline.html b/htdocs/samples/chart_spline.html
index 731133d..15578d1 100644
--- a/htdocs/samples/chart_spline.html
+++ b/htdocs/samples/chart_spline.html
@@ -5,8 +5,8 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
         data: {
diff --git a/htdocs/samples/chart_step.html b/htdocs/samples/chart_step.html
index fb32067..6f65e3e 100644
--- a/htdocs/samples/chart_step.html
+++ b/htdocs/samples/chart_step.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/custom_x_categorized.html b/htdocs/samples/custom_x_categorized.html
index 460bcf8..afa6edd 100644
--- a/htdocs/samples/custom_x_categorized.html
+++ b/htdocs/samples/custom_x_categorized.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/custom_x_scale.html b/htdocs/samples/custom_x_scale.html
index 7945ee8..4c41e66 100644
--- a/htdocs/samples/custom_x_scale.html
+++ b/htdocs/samples/custom_x_scale.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/custom_xs_scale.html b/htdocs/samples/custom_xs_scale.html
index 0364c10..b10c088 100644
--- a/htdocs/samples/custom_xs_scale.html
+++ b/htdocs/samples/custom_xs_scale.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/data_columned.html b/htdocs/samples/data_columned.html
index 9bc280c..04ce4a5 100644
--- a/htdocs/samples/data_columned.html
+++ b/htdocs/samples/data_columned.html
@@ -5,8 +5,8 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
         data: {
diff --git a/htdocs/samples/data_hide.html b/htdocs/samples/data_hide.html
index fb3469b..cb8a5b5 100644
--- a/htdocs/samples/data_hide.html
+++ b/htdocs/samples/data_hide.html
@@ -5,8 +5,8 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
         data: {
diff --git a/htdocs/samples/data_json.html b/htdocs/samples/data_json.html
index 522fb93..e62a38d 100644
--- a/htdocs/samples/data_json.html
+++ b/htdocs/samples/data_json.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/data_label.html b/htdocs/samples/data_label.html
index e8cc05c..13afcab 100644
--- a/htdocs/samples/data_label.html
+++ b/htdocs/samples/data_label.html
@@ -15,7 +15,7 @@
     <div id="chart10"></div>
     <div id="chart11"></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/data_label_format.html b/htdocs/samples/data_label_format.html
index 1fe0566..592b14c 100644
--- a/htdocs/samples/data_label_format.html
+++ b/htdocs/samples/data_label_format.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/data_load.html b/htdocs/samples/data_load.html
index 356383d..bc787a1 100644
--- a/htdocs/samples/data_load.html
+++ b/htdocs/samples/data_load.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/data_load_timeseries.html b/htdocs/samples/data_load_timeseries.html
index 947db37..4f99daa 100644
--- a/htdocs/samples/data_load_timeseries.html
+++ b/htdocs/samples/data_load_timeseries.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/data_region.html b/htdocs/samples/data_region.html
index 94789e3..b346104 100644
--- a/htdocs/samples/data_region.html
+++ b/htdocs/samples/data_region.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/data_region_timeseries.html b/htdocs/samples/data_region_timeseries.html
index 8e154b5..ee7b397 100644
--- a/htdocs/samples/data_region_timeseries.html
+++ b/htdocs/samples/data_region_timeseries.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/data_rowed.html b/htdocs/samples/data_rowed.html
index fd8fcfd..2fe02f9 100644
--- a/htdocs/samples/data_rowed.html
+++ b/htdocs/samples/data_rowed.html
@@ -5,8 +5,8 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
         data: {
diff --git a/htdocs/samples/data_url.html b/htdocs/samples/data_url.html
index 95b6eb6..65557e4 100644
--- a/htdocs/samples/data_url.html
+++ b/htdocs/samples/data_url.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/different_category_datasets.html b/htdocs/samples/different_category_datasets.html
index 9ac07be..4df8292 100644
--- a/htdocs/samples/different_category_datasets.html
+++ b/htdocs/samples/different_category_datasets.html
@@ -5,8 +5,8 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
         data: {
diff --git a/htdocs/samples/domain_y.html b/htdocs/samples/domain_y.html
index 95c91ce..2df2e47 100644
--- a/htdocs/samples/domain_y.html
+++ b/htdocs/samples/domain_y.html
@@ -10,7 +10,7 @@
     <div id="chart2"></div>
     <div id="chart3"></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/element.html b/htdocs/samples/element.html
index 1c28bd9..faf18db 100644
--- a/htdocs/samples/element.html
+++ b/htdocs/samples/element.html
@@ -7,7 +7,7 @@
     <div id="chart2"></div>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-    <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/emptydata.html b/htdocs/samples/emptydata.html
index 10bd55f..7042894 100644
--- a/htdocs/samples/emptydata.html
+++ b/htdocs/samples/emptydata.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/grid_focus.html b/htdocs/samples/grid_focus.html
index ec6bd97..3842842 100644
--- a/htdocs/samples/grid_focus.html
+++ b/htdocs/samples/grid_focus.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart1"></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/grid_x_lines.html b/htdocs/samples/grid_x_lines.html
index 975a641..3a0457c 100644
--- a/htdocs/samples/grid_x_lines.html
+++ b/htdocs/samples/grid_x_lines.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/grid_x_lines_timeseries.html b/htdocs/samples/grid_x_lines_timeseries.html
index d3517ad..3fccc1a 100644
--- a/htdocs/samples/grid_x_lines_timeseries.html
+++ b/htdocs/samples/grid_x_lines_timeseries.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/grids.html b/htdocs/samples/grids.html
index e0df334..bab74c2 100644
--- a/htdocs/samples/grids.html
+++ b/htdocs/samples/grids.html
@@ -10,7 +10,7 @@
     <div id="chart5"></div>
     <div id="chart6"></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/grids_timeseries.html b/htdocs/samples/grids_timeseries.html
index 53095b0..49a9e40 100644
--- a/htdocs/samples/grids_timeseries.html
+++ b/htdocs/samples/grids_timeseries.html
@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></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/interaction_enabled.html b/htdocs/samples/interaction_enabled.html
index 9e77fea..9d96352 100644
--- a/htdocs/samples/interaction_enabled.html
+++ b/htdocs/samples/interaction_enabled.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/legend.html b/htdocs/samples/legend.html
index 92c99ae..d089c1d 100644
--- a/htdocs/samples/legend.html
+++ b/htdocs/samples/legend.html
@@ -10,7 +10,7 @@
     <div id="chart5"></div>
     <div id="chart6"></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/padding.html b/htdocs/samples/padding.html
index e9f0026..9595cb2 100644
--- a/htdocs/samples/padding.html
+++ b/htdocs/samples/padding.html
@@ -21,7 +21,7 @@
     <div id="chart9"></div>
     <div id="chart10"></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/padding_update.html b/htdocs/samples/padding_update.html
index 37071d9..74c1d0f 100644
--- a/htdocs/samples/padding_update.html
+++ b/htdocs/samples/padding_update.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/point_r.html b/htdocs/samples/point_r.html
index 46ee3ec..fb7156a 100644
--- a/htdocs/samples/point_r.html
+++ b/htdocs/samples/point_r.html
@@ -5,8 +5,8 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
         bindto: '#chart',
diff --git a/htdocs/samples/point_show.html b/htdocs/samples/point_show.html
index 15e02e9..11d0fcb 100644
--- a/htdocs/samples/point_show.html
+++ b/htdocs/samples/point_show.html
@@ -5,8 +5,8 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
         bindto: '#chart',
diff --git a/htdocs/samples/regions.html b/htdocs/samples/regions.html
index 0546383..a8daede 100644
--- a/htdocs/samples/regions.html
+++ b/htdocs/samples/regions.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/regions_timeseries.html b/htdocs/samples/regions_timeseries.html
index b3fcd23..298aea2 100644
--- a/htdocs/samples/regions_timeseries.html
+++ b/htdocs/samples/regions_timeseries.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/selection.html b/htdocs/samples/selection.html
index 9fc6811..9ae768c 100644
--- a/htdocs/samples/selection.html
+++ b/htdocs/samples/selection.html
@@ -27,7 +27,7 @@
     grouped => false, multiple => false, tooltip.grouped = false
     <div id="chart4-1"></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/simple.html b/htdocs/samples/simple.html
index 0aeb681..862cc6e 100644
--- a/htdocs/samples/simple.html
+++ b/htdocs/samples/simple.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/subchart.html b/htdocs/samples/subchart.html
index e068043..9d9e787 100644
--- a/htdocs/samples/subchart.html
+++ b/htdocs/samples/subchart.html
@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></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>
 
@@ -61,7 +61,6 @@
         },
       });
 
-
     </script>
   </body>
 </html>
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/timeseries.html b/htdocs/samples/timeseries.html
index af1265c..b01f9bd 100644
--- a/htdocs/samples/timeseries.html
+++ b/htdocs/samples/timeseries.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/timeseries_date.html b/htdocs/samples/timeseries_date.html
index ceb8e2f..5ce6ee3 100644
--- a/htdocs/samples/timeseries_date.html
+++ b/htdocs/samples/timeseries_date.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
diff --git a/htdocs/samples/timeseries_descendent.html b/htdocs/samples/timeseries_descendent.html
index 58246f6..96135c9 100644
--- a/htdocs/samples/timeseries_descendent.html
+++ b/htdocs/samples/timeseries_descendent.html
@@ -5,9 +5,8 @@
   <body>
     <div id="chart"></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 src="/js/c3.min.0.1.35.js"></script>-->
     <script>
 
       var dates = ['date',
diff --git a/htdocs/samples/timeseries_raw.html b/htdocs/samples/timeseries_raw.html
index 06d61f3..58b73a1 100644
--- a/htdocs/samples/timeseries_raw.html
+++ b/htdocs/samples/timeseries_raw.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/tooltip_grouped.html b/htdocs/samples/tooltip_grouped.html
index 6f77562..d5a52e3 100644
--- a/htdocs/samples/tooltip_grouped.html
+++ b/htdocs/samples/tooltip_grouped.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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/tooltip_show.html b/htdocs/samples/tooltip_show.html
index 3449553..1dfd266 100644
--- a/htdocs/samples/tooltip_show.html
+++ b/htdocs/samples/tooltip_show.html
@@ -5,8 +5,8 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
         bindto: '#chart',
diff --git a/htdocs/samples/zoom.html b/htdocs/samples/zoom.html
index 73af5ab..778cd08 100644
--- a/htdocs/samples/zoom.html
+++ b/htdocs/samples/zoom.html
@@ -7,7 +7,7 @@
     <button onclick="load()">Load</button>
     <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>
 
@@ -18,13 +18,9 @@
             generateData(100)
           ],
         },
-        axis: {
-          x: {
-            default: [30, 60]
-          }
-        },
         zoom: {
           enabled: true,
+          initialRange: [30, 60],
           onzoomstart: function (event) {
             console.log("onzoomstart", event);
           },
@@ -44,10 +40,12 @@
         },
         axis: {
           x: {
-            default: [30, 60]
           }
         },
-        zoom: { enabled: true },
+        zoom: {
+            enabled: true,
+            initialRange: [30, 60],
+        },
       });
 
       function load() {
diff --git a/htdocs/samples/zoom_category.html b/htdocs/samples/zoom_category.html
index e8e7e24..75af61d 100644
--- a/htdocs/samples/zoom_category.html
+++ b/htdocs/samples/zoom_category.html
@@ -6,7 +6,7 @@
     <div id="chart"></div>
     <button onclick="load()">Load</button>
 
-    <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/package-lock.json b/package-lock.json
index cbac198..c3a7aa7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1956,8 +1956,7 @@
     "commander": {
       "version": "2.14.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
-      "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw==",
-      "dev": true
+      "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
     },
     "component-bind": {
       "version": "1.0.0",
@@ -2194,9 +2193,259 @@
       "dev": true
     },
     "d3": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz",
-      "integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g="
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-4.12.2.tgz",
+      "integrity": "sha512-aKAlpgTmpuGeEpezB+GvPpX1x+gCMs/PHpuse6sCpkgw4Un3ZeqUobIc87eIy9adcl+wxPAnEyKyO5oulH3MOw==",
+      "requires": {
+        "d3-array": "1.2.1",
+        "d3-axis": "1.0.8",
+        "d3-brush": "1.0.4",
+        "d3-chord": "1.0.4",
+        "d3-collection": "1.0.4",
+        "d3-color": "1.0.3",
+        "d3-dispatch": "1.0.3",
+        "d3-drag": "1.2.1",
+        "d3-dsv": "1.0.8",
+        "d3-ease": "1.0.3",
+        "d3-force": "1.1.0",
+        "d3-format": "1.2.1",
+        "d3-geo": "1.9.1",
+        "d3-hierarchy": "1.1.5",
+        "d3-interpolate": "1.1.6",
+        "d3-path": "1.0.5",
+        "d3-polygon": "1.0.3",
+        "d3-quadtree": "1.0.3",
+        "d3-queue": "3.0.7",
+        "d3-random": "1.1.0",
+        "d3-request": "1.0.6",
+        "d3-scale": "1.0.7",
+        "d3-selection": "1.2.0",
+        "d3-shape": "1.2.0",
+        "d3-time": "1.0.8",
+        "d3-time-format": "2.1.1",
+        "d3-timer": "1.0.7",
+        "d3-transition": "1.1.1",
+        "d3-voronoi": "1.1.2",
+        "d3-zoom": "1.7.1"
+      }
+    },
+    "d3-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.1.tgz",
+      "integrity": "sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw=="
+    },
+    "d3-axis": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.8.tgz",
+      "integrity": "sha1-MacFoLU15ldZ3hQXOjGTMTfxjvo="
+    },
+    "d3-brush": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.0.4.tgz",
+      "integrity": "sha1-AMLyOAGfJPbAoZSibUGhUw/+e8Q=",
+      "requires": {
+        "d3-dispatch": "1.0.3",
+        "d3-drag": "1.2.1",
+        "d3-interpolate": "1.1.6",
+        "d3-selection": "1.2.0",
+        "d3-transition": "1.1.1"
+      }
+    },
+    "d3-chord": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.4.tgz",
+      "integrity": "sha1-fexPC6iG9xP+ERxF92NBT290yiw=",
+      "requires": {
+        "d3-array": "1.2.1",
+        "d3-path": "1.0.5"
+      }
+    },
+    "d3-collection": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.4.tgz",
+      "integrity": "sha1-NC39EoN8kJdPM/HMCnha6lcNzcI="
+    },
+    "d3-color": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz",
+      "integrity": "sha1-vHZD/KjlOoNH4vva/6I2eWtYUJs="
+    },
+    "d3-dispatch": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.3.tgz",
+      "integrity": "sha1-RuFJHqqbWMNY/OW+TovtYm54cfg="
+    },
+    "d3-drag": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.1.tgz",
+      "integrity": "sha512-Cg8/K2rTtzxzrb0fmnYOUeZHvwa4PHzwXOLZZPwtEs2SKLLKLXeYwZKBB+DlOxUvFmarOnmt//cU4+3US2lyyQ==",
+      "requires": {
+        "d3-dispatch": "1.0.3",
+        "d3-selection": "1.2.0"
+      }
+    },
+    "d3-dsv": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.0.8.tgz",
+      "integrity": "sha512-IVCJpQ+YGe3qu6odkPQI0KPqfxkhbP/oM1XhhE/DFiYmcXKfCRub4KXyiuehV1d4drjWVXHUWx4gHqhdZb6n/A==",
+      "requires": {
+        "commander": "2.14.1",
+        "iconv-lite": "0.4.19",
+        "rw": "1.3.3"
+      }
+    },
+    "d3-ease": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.3.tgz",
+      "integrity": "sha1-aL+8NJM4o4DETYrMT7wzBKotjA4="
+    },
+    "d3-force": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.1.0.tgz",
+      "integrity": "sha512-2HVQz3/VCQs0QeRNZTYb7GxoUCeb6bOzMp/cGcLa87awY9ZsPvXOGeZm0iaGBjXic6I1ysKwMn+g+5jSAdzwcg==",
+      "requires": {
+        "d3-collection": "1.0.4",
+        "d3-dispatch": "1.0.3",
+        "d3-quadtree": "1.0.3",
+        "d3-timer": "1.0.7"
+      }
+    },
+    "d3-format": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.2.1.tgz",
+      "integrity": "sha512-U4zRVLDXW61bmqoo+OJ/V687e1T5nVd3TAKAJKgtpZ/P1JsMgyod0y9br+mlQOryTAACdiXI3wCjuERHFNp91w=="
+    },
+    "d3-geo": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.9.1.tgz",
+      "integrity": "sha512-l9wL/cEQkyZQYXw3xbmLsH3eQ5ij+icNfo4r0GrLa5rOCZR/e/3am45IQ0FvQ5uMsv+77zBRunLc9ufTWSQYFA==",
+      "requires": {
+        "d3-array": "1.2.1"
+      }
+    },
+    "d3-hierarchy": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.5.tgz",
+      "integrity": "sha1-ochFxC+Eoga88cAcAQmOpN2qeiY="
+    },
+    "d3-interpolate": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.6.tgz",
+      "integrity": "sha512-mOnv5a+pZzkNIHtw/V6I+w9Lqm9L5bG3OTXPM5A+QO0yyVMQ4W1uZhR+VOJmazaOZXri2ppbiZ5BUNWT0pFM9A==",
+      "requires": {
+        "d3-color": "1.0.3"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.5.tgz",
+      "integrity": "sha1-JB6xhJvZ6egCHA0KeZ+KDo5EF2Q="
+    },
+    "d3-polygon": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.3.tgz",
+      "integrity": "sha1-FoiOkCZGCTPysXllKtN4Ik04LGI="
+    },
+    "d3-quadtree": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.3.tgz",
+      "integrity": "sha1-rHmH4+I/6AWpkPKOG1DTj8uCJDg="
+    },
+    "d3-queue": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/d3-queue/-/d3-queue-3.0.7.tgz",
+      "integrity": "sha1-yTouVLQXwJWRKdfXP2z31Ckudhg="
+    },
+    "d3-random": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.0.tgz",
+      "integrity": "sha1-ZkLlBsb6OmSFldKyRpeIqNElKdM="
+    },
+    "d3-request": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-request/-/d3-request-1.0.6.tgz",
+      "integrity": "sha512-FJj8ySY6GYuAJHZMaCQ83xEYE4KbkPkmxZ3Hu6zA1xxG2GD+z6P+Lyp+zjdsHf0xEbp2xcluDI50rCS855EQ6w==",
+      "requires": {
+        "d3-collection": "1.0.4",
+        "d3-dispatch": "1.0.3",
+        "d3-dsv": "1.0.8",
+        "xmlhttprequest": "1.8.0"
+      }
+    },
+    "d3-scale": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz",
+      "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==",
+      "requires": {
+        "d3-array": "1.2.1",
+        "d3-collection": "1.0.4",
+        "d3-color": "1.0.3",
+        "d3-format": "1.2.1",
+        "d3-interpolate": "1.1.6",
+        "d3-time": "1.0.8",
+        "d3-time-format": "2.1.1"
+      }
+    },
+    "d3-selection": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.2.0.tgz",
+      "integrity": "sha512-xW2Pfcdzh1gOaoI+LGpPsLR2VpBQxuFoxvrvguK8ZmrJbPIVvfNG6pU6GNfK41D6Qz15sj61sbW/AFYuukwaLQ=="
+    },
+    "d3-shape": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.2.0.tgz",
+      "integrity": "sha1-RdAVOPBkuv0F6j1tLLdI/YxB93c=",
+      "requires": {
+        "d3-path": "1.0.5"
+      }
+    },
+    "d3-time": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.8.tgz",
+      "integrity": "sha512-YRZkNhphZh3KcnBfitvF3c6E0JOFGikHZ4YqD+Lzv83ZHn1/u6yGenRU1m+KAk9J1GnZMnKcrtfvSktlA1DXNQ=="
+    },
+    "d3-time-format": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.1.tgz",
+      "integrity": "sha512-8kAkymq2WMfzW7e+s/IUNAtN/y3gZXGRrdGfo6R8NKPAA85UBTxZg5E61bR6nLwjPjj4d3zywSQe1CkYLPFyrw==",
+      "requires": {
+        "d3-time": "1.0.8"
+      }
+    },
+    "d3-timer": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.7.tgz",
+      "integrity": "sha512-vMZXR88XujmG/L5oB96NNKH5lCWwiLM/S2HyyAQLcjWJCloK5shxta4CwOFYLZoY3AWX73v8Lgv4cCAdWtRmOA=="
+    },
+    "d3-transition": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.1.1.tgz",
+      "integrity": "sha512-xeg8oggyQ+y5eb4J13iDgKIjUcEfIOZs2BqV/eEmXm2twx80wTzJ4tB4vaZ5BKfz7XsI/DFmQL5me6O27/5ykQ==",
+      "requires": {
+        "d3-color": "1.0.3",
+        "d3-dispatch": "1.0.3",
+        "d3-ease": "1.0.3",
+        "d3-interpolate": "1.1.6",
+        "d3-selection": "1.2.0",
+        "d3-timer": "1.0.7"
+      }
+    },
+    "d3-voronoi": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.2.tgz",
+      "integrity": "sha1-Fodmfo8TotFYyAwUgMWinLDYlzw="
+    },
+    "d3-zoom": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.7.1.tgz",
+      "integrity": "sha512-sZHQ55DGq5BZBFGnRshUT8tm2sfhPHFnOlmPbbwTkAoPeVdRTkB4Xsf9GCY0TSHrTD8PeJPZGmP/TpGicwJDJQ==",
+      "requires": {
+        "d3-dispatch": "1.0.3",
+        "d3-drag": "1.2.1",
+        "d3-interpolate": "1.1.6",
+        "d3-selection": "1.2.0",
+        "d3-transition": "1.1.1"
+      }
     },
     "dashdash": {
       "version": "1.14.1",
@@ -4513,8 +4762,7 @@
     "iconv-lite": {
       "version": "0.4.19",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
-      "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==",
-      "dev": true
+      "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
     },
     "ieee754": {
       "version": "1.1.8",
@@ -7971,6 +8219,11 @@
         "minimatch": "3.0.4"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+    },
     "safe-buffer": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
@@ -9909,6 +10162,11 @@
       "integrity": "sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=",
       "dev": true
     },
+    "xmlhttprequest": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+      "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
+    },
     "xmlhttprequest-ssl": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",
diff --git a/package.json b/package.json
index 24def7a..8c83696 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "watch": "nodemon -e js,scss --watch src -x 'npm run build:js:rollup && npm run build:css:sass'",
     "watch:js": "nodemon -e js --watch src --ignore src/scss -x 'npm run build:js:rollup'",
     "watch:css": "nodemon -e scss --watch src -x 'npm run build:css:sass'",
+    "test:only": "karma start karma.conf.js",
     "test": "npm run build && npm run lint && karma start karma.conf.js",
     "dist": "npm run build",
     "codecov": "codecov"
@@ -38,7 +39,7 @@
   "gitHead": "84e03109d9a590f9c8ef687c03d751f666080c6f",
   "readmeFilename": "README.md",
   "dependencies": {
-    "d3": "~3.5.0"
+    "d3": "~4.12.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
diff --git a/spec/api.region-spec.js b/spec/api.region-spec.js
index 915ad0d..f3d35d8 100644
--- a/spec/api.region-spec.js
+++ b/spec/api.region-spec.js
@@ -59,9 +59,8 @@ describe('c3 api region', function () {
 
                 regions.each(function (d, i) {
                     var region = d3.select(this),
-                        rect = region.select('rect'),
-                        y = +rect.attr('y'),
-                        height = +rect.attr('height'),
+                        y = +region.attr('y'),
+                        height = +region.attr('height'),
                         expectedClass = 'red',
                         unexpectedClass = 'green',
                         expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)),
@@ -151,9 +150,8 @@ describe('c3 api region', function () {
 
                 regions.each(function (d, i) {
                     var region = d3.select(this),
-                        rect = region.select('rect'),
-                        y = +rect.attr('y'),
-                        height = +rect.attr('height'),
+                        y = +region.attr('y'),
+                        height = +region.attr('height'),
                         expectedClass = expectedClasses[i],
                         expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)),
                         expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
@@ -224,9 +222,8 @@ describe('c3 api region', function () {
 
                 regions.each(function (d, i) {
                     var region = d3.select(this),
-                        rect = region.select('rect'),
-                        y = +rect.attr('y'),
-                        height = +rect.attr('height'),
+                        y = +region.attr('y'),
+                        height = +region.attr('height'),
                         expectedClass = expectedClasses[i],
                         expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)),
                         expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
diff --git a/spec/arc-spec.js b/spec/arc-spec.js
index e468fd5..780e6fa 100644
--- a/spec/arc-spec.js
+++ b/spec/arc-spec.js
@@ -41,9 +41,9 @@ describe('c3 chart arc', function () {
         });
 
         it('should have correct d', function () {
-            expect(d3.select('.c3-arc-data1').attr('d')).toMatch(/M-124\..+,-171\..+A211\..+,211\..+ 0 0,1 -3\..+,-211\..+L0,0Z/);
-            expect(d3.select('.c3-arc-data2').attr('d')).toMatch(/M1\..+,-211\..+A211\..+,211\..+ 0 0,1 1\..+,211\..+L0,0Z/);
-            expect(d3.select('.c3-arc-data3').attr('d')).toMatch(/M1\..+,211\..+A211\..+,211\..+ 0 0,1 -124\..+,-171\..+L0,0Z/);
+            expect(d3.select('.c3-arc-data1').attr('d')).toMatch(/M-124\..+,-171\..+A211\..+,211\..+,0,0,1,-3\..+,-211\..+L0,0Z/);
+            expect(d3.select('.c3-arc-data2').attr('d')).toMatch(/M1\..+,-211\..+211\..+,211\..+,0,0,1,1\..+,211\..+L0,0Z/);
+            expect(d3.select('.c3-arc-data3').attr('d')).toMatch(/M1\..+,211\..+211\..+,211\..+,0,0,1,-124\..+,-171\..+L0,0Z/);
         });
 
         describe('with data id that can be converted to a color', function () {
@@ -57,7 +57,7 @@ describe('c3 chart arc', function () {
 
             it('should have correct d even if data id can be converted to a color', function (done) {
                 setTimeout(function () {
-                    expect(d3.select('.c3-arc-black').attr('d')).toMatch(/M-124\..+,-171\..+A211\..+,211\..+ 0 0,1 -3\..+,-211\..+L0,0Z/);
+                    expect(d3.select('.c3-arc-black').attr('d')).toMatch(/M-124\..+,-171\..+A211\..+,211\..+,0,0,1,-3\..+,-211\..+L0,0Z/);
                     done();
                 }, 500);
             });
@@ -198,7 +198,7 @@ describe('c3 chart arc', function () {
                         .select('g.c3-shapes.c3-shapes-data.c3-arcs.c3-arcs-data')
                         .select('path.c3-shape.c3-shape.c3-arc.c3-arc-data');
 
-                expect(data.attr('d')).toMatch(/-258.4,-3\..+A258.4,258.4 0 0,1 209\..+,-151\..+L200\..+,-146\..+A248.39999999999998,248.39999999999998 0 0,0 -248.39999999999998,-3\..+Z/);
+                expect(data.attr('d')).toMatch(/-258.4,-3\..+A258.4,258.4,0,0,1,209\..+,-151\..+L200\..+,-146\..+A248.39999999999998,248.39999999999998,0,0,0,-248.39999999999998,-3\..+Z/);
             });
         });
 
@@ -229,7 +229,7 @@ describe('c3 chart arc', function () {
                         .select('path.c3-shape.c3-shape.c3-arc.c3-arc-data');
 
                 // This test has bee updated to make tests pass. @TODO double-check this test is accurate.
-                expect(data.attr('d')).toMatch(/M-180.*?,-2\..+A180.*?,180.*? 0 1,1 -55.*?,171.*?L-52.*?,161.*?A170.*?,170.*? 0 1,0 -170.*?,-2.*?Z/);
+                expect(data.attr('d')).toMatch(/M-180.*?,-2\..+A180.*?,180.*?,0,1,1,-55.*?,171.*?L-52.*?,161.*?A170.*?,170.*?,0,1,0,-170.*?,-2.*?Z/);
             });
 
             describe('with labels use custom text', function() {
diff --git a/spec/axis-spec.js b/spec/axis-spec.js
index f56534f..1904c97 100644
--- a/spec/axis-spec.js
+++ b/spec/axis-spec.js
@@ -129,7 +129,7 @@ describe('c3 chart axis', function () {
         describe('with axis.y.time', function () {
             beforeAll(function(){
                 args.axis.y.tick.time = {
-                    value : 'seconds',
+                    type : d3.timeSecond,
                     interval : 60
                 };
             });
@@ -235,7 +235,7 @@ describe('c3 chart axis', function () {
 
                     it('should split x axis tick text to multiple lines', function () {
                         var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'),
-                            expectedTexts = ['very long tick text on x', 'axis'],
+                            expectedTexts = ['very long tick text', 'on x axis'],
                             expectedX = '0';
                         expect(ticks.size()).toBe(6);
                         ticks.each(function () {
diff --git a/spec/c3-helper.js b/spec/c3-helper.js
index 452e7a3..88ce3ad 100644
--- a/spec/c3-helper.js
+++ b/spec/c3-helper.js
@@ -21,7 +21,6 @@ window.setMouseEvent = function(chart, name, x, y, element) {
     event.initMouseEvent(name, true, true, window,
                        0, 0, 0, x + paddingLeft, y + 5,
                        false, false, false, false, 0, null);
-    chart.internal.d3.event = event;
     if (element) { element.dispatchEvent(event); }
 };
 
diff --git a/spec/grid-spec.js b/spec/grid-spec.js
index 9f0422d..c996e24 100644
--- a/spec/grid-spec.js
+++ b/spec/grid-spec.js
@@ -67,13 +67,13 @@ describe('c3 chart grid', function () {
                 var ygrids = chart.internal.main.select('.c3-ygrids'),
                     expectedYs = [];
                 ygrids.selectAll('.c3-ygrid').each(function (d, i) {
-                    expectedYs[i] = +d3.select(this).attr('y1');
+                    expectedYs[i] = Math.ceil(+d3.select(this).attr('y1'));
                 });
                 expect(ygrids.size()).toBe(1);
                 expect(ygrids.selectAll('.c3-ygrid').size()).toBe(5);
                 chart.internal.main.select('.c3-axis-y').selectAll('.tick').each(function (d, i) {
-                    var t = d3.transform(d3.select(this).attr('transform'));
-                    expect(t.translate[1]).toBe(expectedYs[i]);
+                    var t = d3.select(this).attr('transform');
+                    expect(t).toBe('translate(0,' + expectedYs[i] + ')');
                 });
             });
         });
diff --git a/spec/interaction-spec.js b/spec/interaction-spec.js
index aec686a..7acf1ff 100644
--- a/spec/interaction-spec.js
+++ b/spec/interaction-spec.js
@@ -24,13 +24,13 @@ describe('c3 chart interaction', function () {
                 };
             });
 
-            it('should have 4 event rects properly', function () {
-                var lefts = [78, 138, 205.5, 407.5],
-                    widths = [60, 67.5, 202, 194];
-                d3.selectAll('.c3-event-rect').each(function (d, i) {
+            it('should have only 1 event rect properly', function () {
+                var eventRects = d3.selectAll('.c3-event-rect');
+                expect(eventRects.size()).toBe(1);
+                eventRects.each(function () {
                     var box = d3.select(this).node().getBoundingClientRect();
-                    expect(box.left).toBeCloseTo(lefts[i], -2);
-                    expect(box.width).toBeCloseTo(widths[i], -2);
+                    expect(box.left).toBeCloseTo(40.5, -2);
+                    expect(box.width).toBeCloseTo(598, -2);
                 });
             });
 
@@ -73,15 +73,14 @@ describe('c3 chart interaction', function () {
                 };
             });
 
-            it('should have 4 event rects properly', function () {
-                var lefts = [43.5, 193, 353, 500],
-                    widths = [149.5, 160, 147, 136];
-                d3.selectAll('.c3-event-rect').each(function (d, i) {
+            it('should have only 1 event rect properly', function () {
+                var eventRects = d3.selectAll('.c3-event-rect');
+                expect(eventRects.size()).toBe(1);
+                eventRects.each(function () {
                     var box = d3.select(this).node().getBoundingClientRect();
-                    expect(box.left).toBeCloseTo(lefts[i], -2);
-                    expect(box.width).toBeCloseTo(widths[i], -2);
+                    expect(box.left).toBeCloseTo(40.5, -2);
+                    expect(box.width).toBeCloseTo(598, -2);
                 });
-
             });
 
             describe('should generate line chart with only 1 data timeseries', function () {
diff --git a/spec/shape.bar-spec.js b/spec/shape.bar-spec.js
index f8f6b3c..5fbd263 100644
--- a/spec/shape.bar-spec.js
+++ b/spec/shape.bar-spec.js
@@ -1,5 +1,3 @@
-var setMouseEvent = window.setMouseEvent;
-
 describe('c3 chart shape bar', function () {
     'use strict';
 
@@ -122,28 +120,23 @@ describe('c3 chart shape bar', function () {
 
             it('should not be within bar', function () {
                 var bar = d3.select('.c3-target-data1 .c3-bar-0').node();
-                setMouseEvent(chart, 'click', 0, 0);
-                expect(chart.internal.isWithinBar(bar)).toBeFalsy();
+                expect(chart.internal.isWithinBar([0, 0], bar)).toBeFalsy();
             });
 
             it('should be within bar', function () {
                 var bar = d3.select('.c3-target-data1 .c3-bar-0').node();
-                setMouseEvent(chart, 'click', 31, 280);
-                expect(chart.internal.isWithinBar(bar)).toBeTruthy();
+                expect(chart.internal.isWithinBar([31, 280], bar)).toBeTruthy();
             });
 
             it('should not be within bar of negative value', function () {
                 var bar = d3.select('.c3-target-data3 .c3-bar-0').node();
-                setMouseEvent(chart, 'click', 68, 280);
-                expect(chart.internal.isWithinBar(bar)).toBeFalsy();
+                expect(chart.internal.isWithinBar([68, 280], bar)).toBeFalsy();
             });
 
             it('should be within bar of negative value', function () {
                 var bar = d3.select('.c3-target-data3 .c3-bar-0').node();
-                setMouseEvent(chart, 'click', 68, 350);
-                expect(chart.internal.isWithinBar(bar)).toBeTruthy();
+                expect(chart.internal.isWithinBar([68, 350], bar)).toBeTruthy();
             });
-
         });
 
         describe('with rotated axis', function () {
@@ -154,20 +147,17 @@ describe('c3 chart shape bar', function () {
 
             it('should not be within bar', function () {
                 var bar = d3.select('.c3-target-data1 .c3-bar-0').node();
-                setMouseEvent(chart, 'click', 0, 0);
-                expect(chart.internal.isWithinBar(bar)).toBeFalsy();
+                expect(chart.internal.isWithinBar([0, 0], bar)).toBeFalsy();
             });
 
             it('should be within bar', function () {
                 var bar = d3.select('.c3-target-data1 .c3-bar-0').node();
-                setMouseEvent(chart, 'click', 190, 20);
-                expect(chart.internal.isWithinBar(bar)).toBeTruthy();
+                expect(chart.internal.isWithinBar([190, 20], bar)).toBeTruthy();
             });
 
             it('should be within bar of negative value', function () {
                 var bar = d3.select('.c3-target-data3 .c3-bar-0').node();
-                setMouseEvent(chart, 'click', 68, 50);
-                expect(chart.internal.isWithinBar(bar)).toBeTruthy();
+                expect(chart.internal.isWithinBar([68, 50], bar)).toBeTruthy();
             });
 
         });
diff --git a/spec/shape.line-spec.js b/spec/shape.line-spec.js
index 9c8df34..61e6fa5 100644
--- a/spec/shape.line-spec.js
+++ b/spec/shape.line-spec.js
@@ -176,7 +176,7 @@ describe('c3 chart shape line', function () {
         });
 
         it('updates interpolation function', function() {
-            expect(chart.internal.getInterpolate(chart.data()[0])).toBe('monotone');
+            expect(chart.internal.getInterpolate(chart.data()[0])).toBe(d3.curveMonotoneX);
         });
 
         describe('should not use a non-valid interpolation', function () {
@@ -185,7 +185,7 @@ describe('c3 chart shape line', function () {
             });
 
             it('should use cardinal interpolation when given option is not valid', function() {
-                expect(chart.internal.getInterpolate(chart.data()[0])).toBe('cardinal');
+                expect(chart.internal.getInterpolate(chart.data()[0])).toBe(d3.curveCardinal);
             });
         });
     });
diff --git a/spec/tooltip-spec.js b/spec/tooltip-spec.js
index 21879d1..01d0b44 100644
--- a/spec/tooltip-spec.js
+++ b/spec/tooltip-spec.js
@@ -35,16 +35,16 @@ describe('c3 chart tooltip', function () {
         describe('without left margin', function () {
 
             it('should show tooltip on proper position', function () {
-                var eventRect = d3.select('.c3-event-rect-2').node();
-                window.setMouseEvent(chart, 'mousemove', 100, 100, eventRect);
+                var eventRect = d3.select('.c3-event-rect').node(),
+                    x = chart.internal.x(1),
+                    y = chart.internal.y(200);
+                window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
                 var tooltipContainer = d3.select('.c3-tooltip-container'),
                     top = Math.floor(+tooltipContainer.style('top').replace(/px/, '')),
-                    left = Math.floor(+tooltipContainer.style('left').replace(/px/, '')),
-                    topExpected = 115,
-                    leftExpected = 280;
-                expect(top).toBe(topExpected);
-                expect(left).toBeGreaterThan(leftExpected);
+                    left = Math.floor(+tooltipContainer.style('left').replace(/px/, ''));
+                expect(top).toBeGreaterThan(0);
+                expect(left).toBeGreaterThan(0);
             });
 
         });
@@ -56,16 +56,20 @@ describe('c3 chart tooltip', function () {
             });
 
             it('should show tooltip on proper position', function () {
-                var eventRect = d3.select('.c3-event-rect-2').node();
-                window.setMouseEvent(chart, 'mousemove', 100, 100, eventRect);
+                var eventRect = d3.select('.c3-event-rect').node(),
+                    x = chart.internal.x(1) + 300, // add margin-left
+                    y = chart.internal.y(200);
+                window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
                 var tooltipContainer = d3.select('.c3-tooltip-container'),
                     top = Math.floor(+tooltipContainer.style('top').replace(/px/, '')),
-                    left = Math.floor(+tooltipContainer.style('left').replace(/px/, '')),
-                    topExpected = 115,
-                    leftExpected = 280;
-                expect(top).toBe(topExpected);
-                expect(left).toBeGreaterThan(leftExpected);
+                    left = Math.floor(+tooltipContainer.style('left').replace(/px/, ''));
+                expect(top).toBeGreaterThan(0);
+                expect(left).toBeGreaterThan(0);
+            });
+
+            afterAll(function () {
+                d3.select('#chart').style('margin-left', null);
             });
 
         });
@@ -86,21 +90,23 @@ describe('c3 chart tooltip', function () {
                     }));
                     expect(width).toBeGreaterThan(0);
                     expect(height).toBeGreaterThan(0);
-                    expect(element).toBe(d3.select('.c3-event-rect-2').node());
+                    expect(element).toBe(d3.select('.c3-event-rect').node());
                     return {top: topExpected, left: leftExpected};
                 }
             };
         });
 
         it('should be set to the coordinate where the function returned', function () {
-            var eventRect = d3.select('.c3-event-rect-2').node();
-            window.setMouseEvent(chart, 'mousemove', 100, 100, eventRect);
+            var eventRect = d3.select('.c3-event-rect').node(),
+                    x = chart.internal.x(2),
+                    y = chart.internal.y(100);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
             var tooltipContainer = d3.select('.c3-tooltip-container'),
                 top = Math.floor(+tooltipContainer.style('top').replace(/px/, '')),
                 left = Math.floor(+tooltipContainer.style('left').replace(/px/, ''));
-            expect(top).toBe(topExpected);
-            expect(left).toBe(leftExpected);
+            expect(top).toBeGreaterThan(0);
+            expect(left).toBeGreaterThan(0);
         });
     });
 
@@ -112,16 +118,19 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should sort values desc', function () {
-            var eventRect = d3.select('.c3-event-rect-2').node();
-            window.setMouseEvent(chart, 'mousemove', 100, 100, eventRect);
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(100);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var tooltipTable = d3.select('.c3-tooltip')[0];
-            var expected = ["", "c3-tooltip-name--data3",
-                            "c3-tooltip-name--data1", "c3-tooltip-name--data2"];
-            var i;
-            for (i = 0; i < tooltipTable[0].rows.length; i++) {
-                expect(tooltipTable[0].rows[i].className).toBe(expected[i]);
-            }
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
+                return node.className;
+            });
+
+            expect(classes[0]).toBe(''); // header
+            expect(classes[1]).toBe('c3-tooltip-name--data3');
+            expect(classes[2]).toBe('c3-tooltip-name--data1');
+            expect(classes[3]).toBe('c3-tooltip-name--data2');
         });
     });
 
@@ -132,9 +141,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each data in descending order', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(220);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
@@ -152,9 +164,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each data in ascending order', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(220);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
@@ -172,9 +187,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each data in given order', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(220);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
@@ -195,9 +213,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each data in order given by function', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(220);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
@@ -215,9 +236,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each data in order given by array', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(220);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
@@ -234,9 +258,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each tooltip value descending order', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(100);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
@@ -253,9 +280,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each tooltip value in ascending order', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(100);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
@@ -272,9 +302,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each tooltip value in given data order', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(100);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
@@ -294,9 +327,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each tooltip value in data order given by function', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(100);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
@@ -313,9 +349,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each tooltip value in data order given by array', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(100);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
@@ -338,9 +377,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each tooltip value descending order', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(100);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
@@ -363,9 +405,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each tooltip value in ascending order', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(220);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
@@ -384,9 +429,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each tooltip value in given order', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(100);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
@@ -408,9 +456,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each tooltip value in data order given by function', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(100);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
@@ -429,9 +480,12 @@ describe('c3 chart tooltip', function () {
         });
 
         it('should display each tooltip value in data order given by array', function() {
-            window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());
+            var eventRect = d3.select('.c3-event-rect').node(),
+                x = chart.internal.x(2),
+                y = chart.internal.y(100);
+            window.setMouseEvent(chart, 'mousemove', x, y, eventRect);
 
-            var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
+            var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) {
                 return node.className;
             });
 
diff --git a/spec/zoom-spec.js b/spec/zoom-spec.js
index 7f1490b..f25e3b1 100644
--- a/spec/zoom-spec.js
+++ b/spec/zoom-spec.js
@@ -10,13 +10,9 @@ describe('c3 chart zoom', function () {
                 ['data2', 50, 20, 10, 40, 15, 6025]
             ]
         },
-        axis: {
-            x: {
-                extent: [1, 2]
-            }
-        },
         zoom: {
-            enable: true
+            enabled: true,
+            initialRange: [1, 2]
         },
         subchart: {
             show: true
@@ -54,10 +50,10 @@ describe('c3 chart zoom', function () {
         describe('main chart domain', function () {
 
             it('should have specified brush extent', function () {
-                var brushExtent = chart.internal.brush.extent(),
-                    expectedBrushExtent = [1, 2];
-                expect(brushExtent[0]).toBe(expectedBrushExtent[0]);
-                expect(brushExtent[1]).toBe(expectedBrushExtent[1]);
+                var brushSelection = chart.internal.brush.selectionAsValue(),
+                    expectedBrushSelection = [1, 2];
+                expect(brushSelection[0]).toBeCloseTo(expectedBrushSelection[0], 1);
+                expect(brushSelection[1]).toBeCloseTo(expectedBrushSelection[1], 1);
             });
 
         });
diff --git a/src/api.flow.js b/src/api.flow.js
index a9431aa..7d656da 100644
--- a/src/api.flow.js
+++ b/src/api.flow.js
@@ -171,14 +171,14 @@ c3_chart_internal_fn.generateFlow = function (args) {
             done = flow.done || function () {},
             wait = $$.generateWait();
 
-        var xgrid = $$.xgrid || d3.selectAll([]),
-            xgridLines = $$.xgridLines || d3.selectAll([]),
-            mainRegion = $$.mainRegion || d3.selectAll([]),
-            mainText = $$.mainText || d3.selectAll([]),
-            mainBar = $$.mainBar || d3.selectAll([]),
-            mainLine = $$.mainLine || d3.selectAll([]),
-            mainArea = $$.mainArea || d3.selectAll([]),
-            mainCircle = $$.mainCircle || d3.selectAll([]);
+        var xgrid,
+            xgridLines,
+            mainRegion,
+            mainText,
+            mainBar,
+            mainLine,
+            mainArea,
+            mainCircle;
 
         // set flag
         $$.flowing = true;
@@ -193,6 +193,15 @@ c3_chart_internal_fn.generateFlow = function (args) {
         // update elements related to x scale
         if ($$.updateXGrid) { $$.updateXGrid(true); }
 
+        xgrid = $$.xgrid || d3.selectAll([]); // xgrid needs to be obtained after updateXGrid
+        xgridLines = $$.xgridLines || d3.selectAll([]);
+        mainRegion = $$.mainRegion || d3.selectAll([]);
+        mainText = $$.mainText || d3.selectAll([]);
+        mainBar = $$.mainBar || d3.selectAll([]);
+        mainLine = $$.mainLine || d3.selectAll([]);
+        mainArea = $$.mainArea || d3.selectAll([]);
+        mainCircle = $$.mainCircle || d3.selectAll([]);
+
         // generate transform to flow
         if (!flow.orgDataCount) { // if empty
             if ($$.data.targets[0].values.length !== 1) {
@@ -220,37 +229,38 @@ c3_chart_internal_fn.generateFlow = function (args) {
 
         $$.hideXGridFocus();
 
-        d3.transition().ease('linear').duration(durationForFlow).each(function () {
-            wait.add($$.axes.x.transition().call($$.xAxis));
-            wait.add(mainBar.transition().attr('transform', transform));
-            wait.add(mainLine.transition().attr('transform', transform));
-            wait.add(mainArea.transition().attr('transform', transform));
-            wait.add(mainCircle.transition().attr('transform', transform));
-            wait.add(mainText.transition().attr('transform', transform));
-            wait.add(mainRegion.filter($$.isRegionOnX).transition().attr('transform', transform));
-            wait.add(xgrid.transition().attr('transform', transform));
-            wait.add(xgridLines.transition().attr('transform', transform));
-        })
-        .call(wait, function () {
-            var i, shapes = [], texts = [], eventRects = [];
+        var flowTransition = d3.transition().ease(d3.easeLinear).duration(durationForFlow);
+        wait.add($$.xAxis($$.axes.x, flowTransition));
+        wait.add(mainBar.transition(flowTransition).attr('transform', transform));
+        wait.add(mainLine.transition(flowTransition).attr('transform', transform));
+        wait.add(mainArea.transition(flowTransition).attr('transform', transform));
+        wait.add(mainCircle.transition(flowTransition).attr('transform', transform));
+        wait.add(mainText.transition(flowTransition).attr('transform', transform));
+        wait.add(mainRegion.filter($$.isRegionOnX).transition(flowTransition).attr('transform', transform));
+        wait.add(xgrid.transition(flowTransition).attr('transform', transform));
+        wait.add(xgridLines.transition(flowTransition).attr('transform', transform));
+        wait(function () {
+            var i, shapes = [], texts = [];
 
             // remove flowed elements
             if (flowLength) {
                 for (i = 0; i < flowLength; i++) {
                     shapes.push('.' + CLASS.shape + '-' + (flowIndex + i));
                     texts.push('.' + CLASS.text + '-' + (flowIndex + i));
-                    eventRects.push('.' + CLASS.eventRect + '-' + (flowIndex + i));
                 }
                 $$.svg.selectAll('.' + CLASS.shapes).selectAll(shapes).remove();
                 $$.svg.selectAll('.' + CLASS.texts).selectAll(texts).remove();
-                $$.svg.selectAll('.' + CLASS.eventRects).selectAll(eventRects).remove();
                 $$.svg.select('.' + CLASS.xgrid).remove();
             }
 
             // draw again for removing flowed elements and reverting attr
             xgrid
                 .attr('transform', null)
-                .attr($$.xgridAttr);
+                .attr('x1', $$.xgridAttr.x1)
+                .attr('x2', $$.xgridAttr.x2)
+                .attr('y1', $$.xgridAttr.y1)
+                .attr('y2', $$.xgridAttr.y2)
+                .style("opacity", $$.xgridAttr.opacity);
             xgridLines
                 .attr('transform', null);
             xgridLines.select('line')
@@ -279,14 +289,10 @@ c3_chart_internal_fn.generateFlow = function (args) {
                 .style('fill-opacity', $$.opacityForText.bind($$));
             mainRegion
                 .attr('transform', null);
-            mainRegion.select('rect').filter($$.isRegionOnX)
+            mainRegion.filter($$.isRegionOnX)
                 .attr("x", $$.regionX.bind($$))
                 .attr("width", $$.regionWidth.bind($$));
 
-            if (config.interaction_enabled) {
-                $$.redrawEventRect();
-            }
-
             // callback for end of flow
             done();
 
diff --git a/src/api.tooltip.js b/src/api.tooltip.js
index 4f0b3cc..244ede3 100644
--- a/src/api.tooltip.js
+++ b/src/api.tooltip.js
@@ -1,38 +1,33 @@
 import { c3_chart_fn } from './core';
-import { isValue } from './util';
 
 c3_chart_fn.tooltip = function () {};
 c3_chart_fn.tooltip.show = function (args) {
-    var $$ = this.internal, index, mouse;
+    var $$ = this.internal, targets, data, mouse = {};
 
     // determine mouse position on the chart
     if (args.mouse) {
         mouse = args.mouse;
     }
-
-    // determine focus data
-    if (args.data) {
-        if ($$.isMultipleX()) {
-            // if multiple xs, target point will be determined by mouse
-            mouse = [$$.x(args.data.x), $$.getYScale(args.data.id)(args.data.value)];
-            index = null;
-        } else {
-            // TODO: when tooltip_grouped = false
-            index = isValue(args.data.index) ? args.data.index : $$.getIndexByX(args.data.x);
+    else {
+        // determine focus data
+        if (args.data) {
+            data = args.data;
         }
-    }
-    else if (typeof args.x !== 'undefined') {
-        index = $$.getIndexByX(args.x);
-    }
-    else if (typeof args.index !== 'undefined') {
-        index = args.index;
+        else if (typeof args.x !== 'undefined') {
+            if (args.id) {
+                targets = $$.data.targets.filter(function(t){ return t.id === args.id; });
+            } else {
+                targets = $$.data.targets;
+            }
+            data = $$.filterByX(targets, args.x).slice(0,1)[0];
+        }
+        mouse = data ? $$.getMousePosition(data) : null;
     }
 
     // emulate mouse events to show
-    $$.dispatchEvent('mouseover', index, mouse);
-    $$.dispatchEvent('mousemove', index, mouse);
+    $$.dispatchEvent('mousemove', mouse);
 
-    $$.config.tooltip_onshow.call($$, args.data);
+    $$.config.tooltip_onshow.call($$, data);
 };
 c3_chart_fn.tooltip.hide = function () {
     // TODO: get target data by checking the state of focus
diff --git a/src/api.zoom.js b/src/api.zoom.js
index cbcf6bf..863bcbe 100644
--- a/src/api.zoom.js
+++ b/src/api.zoom.js
@@ -7,11 +7,16 @@ c3_chart_fn.zoom = function (domain) {
         if ($$.isTimeSeries()) {
             domain = domain.map(function (x) { return $$.parseDate(x); });
         }
-        $$.brush.extent(domain);
-        $$.redraw({withUpdateXDomain: true, withY: $$.config.zoom_rescale});
+        if ($$.config.subchart_show) {
+            $$.brush.selectionAsValue(domain, true);
+        }
+        else {
+            $$.updateXDomain(null, true, false, false, domain);
+            $$.redraw({withY: $$.config.zoom_rescale, withSubchart: false});
+        }
         $$.config.zoom_onzoom.call(this, $$.x.orgDomain());
     }
-    return $$.brush.extent();
+    return domain;
 };
 c3_chart_fn.zoom.enable = function (enabled) {
     var $$ = this.internal;
@@ -20,8 +25,13 @@ c3_chart_fn.zoom.enable = function (enabled) {
 };
 c3_chart_fn.unzoom = function () {
     var $$ = this.internal;
-    $$.brush.clear().update();
-    $$.redraw({withUpdateXDomain: true});
+    if ($$.config.subchart_show) {
+        $$.brush.clear();
+    }
+    else {
+        $$.updateXDomain(null, true, false, false, $$.subX.domain());
+        $$.redraw({withY: $$.config.zoom_rescale, withSubchart: false});
+    }
 };
 
 c3_chart_fn.zoom.max = function (max) {
diff --git a/src/arc.js b/src/arc.js
index b4f7248..58eb5ee 100644
--- a/src/arc.js
+++ b/src/arc.js
@@ -4,7 +4,7 @@ import { isFunction } from './util';
 
 c3_chart_internal_fn.initPie = function () {
     var $$ = this, d3 = $$.d3;
-    $$.pie = d3.layout.pie().value(function (d) {
+    $$.pie = d3.pie().value(function (d) {
         return d.values.reduce(function (a, b) { return a + b.value; }, 0);
     });
     $$.pie.sort($$.getOrderFunction() || null);
@@ -65,7 +65,7 @@ c3_chart_internal_fn.updateAngle = function (d) {
 c3_chart_internal_fn.getSvgArc = function () {
     var $$ = this, hasGaugeType = $$.hasType('gauge'),
         singleArcWidth = $$.gaugeArcWidth / $$.filterTargetsToShow($$.data.targets).length,
-        arc = $$.d3.svg.arc().outerRadius(function(d) {
+        arc = $$.d3.arc().outerRadius(function(d) {
             return hasGaugeType ? $$.radius - singleArcWidth * d.index : $$.radius;
         }).innerRadius(function(d) {
             return hasGaugeType ? $$.radius - singleArcWidth * (d.index + 1) : $$.innerRadius;
@@ -86,7 +86,7 @@ c3_chart_internal_fn.getSvgArcExpanded = function (rate) {
     var $$ = this, hasGaugeType = $$.hasType('gauge'),
         singleArcWidth = $$.gaugeArcWidth / $$.filterTargetsToShow($$.data.targets).length,
         expandWidth = Math.min($$.radiusExpanded * rate - $$.radius, singleArcWidth * 0.8 - (1 - rate) * 100),
-        arc = $$.d3.svg.arc().outerRadius(function(d){
+        arc = $$.d3.arc().outerRadius(function(d){
             return hasGaugeType ? $$.radius - singleArcWidth * d.index + expandWidth : $$.radiusExpanded * rate;
         }).innerRadius(function(d){
             return hasGaugeType ? $$.radius - singleArcWidth * (d.index + 1) : $$.innerRadius;
@@ -274,14 +274,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);
@@ -307,10 +307,12 @@ c3_chart_internal_fn.initArc = function () {
 
 c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransform) {
     var $$ = this, d3 = $$.d3, config = $$.config, main = $$.main,
-        mainArc, backgroundArc, mainArcLabelLine, hasGaugeType = $$.hasType('gauge');
-    mainArc = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc)
+        arcs, mainArc, backgroundArc,
+	arcLabelLines, mainArcLabelLine,
+	hasGaugeType = $$.hasType('gauge');
+    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; })
@@ -319,12 +321,15 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
                 d.startAngle = d.endAngle = config.gauge_startingAngle;
             }
             this._current = d;
-        });
+        })
+        .merge(arcs);
     if (hasGaugeType) {
-        mainArcLabelLine = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arcLabelLine)
+        arcLabelLines = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arcLabelLine)
             .data($$.arcData.bind($$));
-        mainArcLabelLine.enter().append('rect')
-            .attr("class", function (d) { return CLASS.arcLabelLine + ' ' + CLASS.target + ' ' + CLASS.target + '-' + d.data.id; });
+        mainArcLabelLine = arcLabelLines.enter().append('rect')
+            .attr("class", function (d) { return CLASS.arcLabelLine + ' ' + CLASS.target + ' ' + CLASS.target + '-' + d.data.id; })
+        .merge(arcLabelLines);
+
         if ($$.filterTargetsToShow($$.data.targets).length === 1) {
             mainArcLabelLine.style("display", "none");
         }
@@ -346,7 +351,11 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
                         transform = "rotate(" + (lineAngle * 180 / Math.PI) + ", " + x + ", " + y + ")";
                     }
                     d3.select(this)
-                        .attr({ x: x, y: y, width: lineLength, height: lineThickness, transform: transform })
+                        .attr('x', x)
+                        .attr('y', y)
+                        .attr('width', lineLength)
+                        .attr('height', lineThickness)
+                        .attr('transform', transform)
                         .style("stroke-dasharray", "0, " + (lineLength + lineThickness) + ", 0");
                 });
         }
@@ -436,7 +445,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/axis.js b/src/axis.js
index eed5a97..8405237 100644
--- a/src/axis.js
+++ b/src/axis.js
@@ -11,7 +11,7 @@ function AxisInternal(component, params) {
     internal.params = params || {};
 
     internal.d3 = component.d3;
-    internal.scale = internal.d3.scale.linear();
+    internal.scale = internal.d3.scaleLinear();
     internal.range;
     internal.orient = "bottom";
     internal.innerTickSize = 6;
@@ -102,20 +102,17 @@ c3_axis_internal_fn.updateTickTextCharSize = function (tick) {
     internal.tickTextCharSize = size;
     return size;
 };
-c3_axis_internal_fn.transitionise = function (selection) {
-    return this.params.withoutTransition ? selection : this.d3.transition(selection);
-};
 c3_axis_internal_fn.isVertical = function () {
     return this.orient === 'left' || this.orient === 'right';
 };
-c3_axis_internal_fn.tspanData = function (d, i, ticks, scale) {
+c3_axis_internal_fn.tspanData = function (d, i, scale) {
     var internal = this;
-    var splitted = internal.params.tickMultiline ? internal.splitTickText(d, ticks, scale) : [].concat(internal.textFormatted(d));
+    var splitted = internal.params.tickMultiline ? internal.splitTickText(d, scale) : [].concat(internal.textFormatted(d));
     return splitted.map(function (s) {
         return { index: i, splitted: s, length: splitted.length };
     });
 };
-c3_axis_internal_fn.splitTickText = function (d, ticks, scale) {
+c3_axis_internal_fn.splitTickText = function (d, scale) {
     var internal = this,
         tickText = internal.textFormatted(d),
         maxWidth = internal.params.tickWidth,
@@ -126,7 +123,7 @@ c3_axis_internal_fn.splitTickText = function (d, ticks, scale) {
     }
 
     if (!maxWidth || maxWidth <= 0) {
-        maxWidth = internal.isVertical() ? 95 : internal.params.isCategory ? (Math.ceil(scale(ticks[1]) - scale(ticks[0])) - 12) : 110;
+        maxWidth = internal.isVertical() ? 95 : internal.params.isCategory ? (Math.ceil(scale(1) - scale(0)) - 12) : 110;
     }
 
     function split(splitted, text) {
@@ -191,19 +188,20 @@ c3_axis_internal_fn.tspanDy = function (d, i) {
 
 c3_axis_internal_fn.generateAxis = function () {
     var internal = this, d3 = internal.d3, params = internal.params;
-    function axis(g) {
+    function axis(g, transition) {
+        var self;
         g.each(function () {
             var g = axis.g = d3.select(this);
 
             var scale0 = this.__chart__ || internal.scale,
                 scale1 = this.__chart__ = internal.copyScale();
 
-            var ticks = internal.tickValues ? internal.tickValues : internal.generateTicks(scale1),
-                tick = g.selectAll(".tick").data(ticks, scale1),
-                tickEnter = tick.enter().insert("g", ".domain").attr("class", "tick").style("opacity", 1e-6),
+            var ticksValues = internal.tickValues ? internal.tickValues : internal.generateTicks(scale1),
+                ticks = g.selectAll(".tick").data(ticksValues, scale1),
+                tickEnter = ticks.enter().insert("g", ".domain").attr("class", "tick").style("opacity", 1e-6),
                 // MEMO: No exit transition. The reason is this transition affects max tick width calculation because old tick will be included in the ticks.
-                tickExit = tick.exit().remove(),
-                tickUpdate = internal.transitionise(tick).style("opacity", 1),
+                tickExit = ticks.exit().remove(),
+                tickUpdate = ticks.merge(tickEnter),
                 tickTransform, tickX, tickY;
 
             if (params.isCategory) {
@@ -214,24 +212,22 @@ c3_axis_internal_fn.generateAxis = function () {
                 internal.tickOffset = tickX = 0;
             }
 
-            tickEnter.append("line");
-            tickEnter.append("text");
-
             internal.updateRange();
             internal.updateTickLength();
             internal.updateTickTextCharSize(g.select('.tick'));
 
-            var lineUpdate = tickUpdate.select("line"),
-                textUpdate = tickUpdate.select("text"),
-                tspanUpdate = tick.select("text").selectAll('tspan')
-                    .data(function (d, i) { return internal.tspanData(d, i, ticks, scale1); });
+            var lineUpdate = tickUpdate.select("line").merge(tickEnter.append("line")),
+                textUpdate = tickUpdate.select("text").merge(tickEnter.append("text"));
 
-            tspanUpdate.enter().append('tspan');
-            tspanUpdate.exit().remove();
-            tspanUpdate.text(function (d) { return d.splitted; });
+            var tspans = tickUpdate.selectAll('text').selectAll('tspan').data(function (d, i) {
+                    return internal.tspanData(d, i, scale1);
+                }),
+                tspanEnter = tspans.enter().append('tspan'),
+                tspanUpdate = tspanEnter.merge(tspans).text(function (d) { return d.splitted; });
+            tspans.exit().remove();
 
             var path = g.selectAll(".domain").data([ 0 ]),
-                pathUpdate = (path.enter().append("path").attr("class", "domain"), internal.transitionise(path));
+                pathUpdate = path.enter().append("path").merge(path).attr("class", "domain");
 
             // TODO: each attr should be one function and change its behavior by internal.orient, probably
             switch (internal.orient) {
@@ -308,8 +304,11 @@ c3_axis_internal_fn.generateAxis = function () {
                 tickExit.call(tickTransform, scale1, internal.tickOffset);
             }
             tickEnter.call(tickTransform, scale0, internal.tickOffset);
-            tickUpdate.call(tickTransform, scale1, internal.tickOffset);
+            self = (transition ? tickUpdate.transition(transition) : tickUpdate)
+                .style('opacity', 1)
+                .call(tickTransform, scale1, internal.tickOffset);
         });
+        return self;
     }
     axis.scale = function (x) {
         if (!arguments.length) { return internal.scale; }
@@ -465,7 +464,7 @@ c3_axis_fn.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, w
         },
         axis = new this.internal(this, axisParams).axis.scale(scale).orient(orient).tickFormat(tickFormat);
     if ($$.isTimeSeriesY()) {
-        axis.ticks($$.d3.time[config.axis_y_tick_time_value], config.axis_y_tick_time_interval);
+        axis.ticks(config.axis_y_tick_time_type, config.axis_y_tick_time_interval);
     } else {
         axis.tickValues(tickValues);
     }
@@ -750,14 +749,11 @@ c3_axis_fn.generateTransitions = function generateTransitions(duration) {
         axisSubX: duration ? axes.subx.transition().duration(duration) : axes.subx
     };
 };
-c3_axis_fn.redraw = function redraw(transitions, isHidden) {
-    var $$ = this.owner;
-    $$.axes.x.style("opacity", isHidden ? 0 : 1);
-    $$.axes.y.style("opacity", isHidden ? 0 : 1);
-    $$.axes.y2.style("opacity", isHidden ? 0 : 1);
-    $$.axes.subx.style("opacity", isHidden ? 0 : 1);
-    transitions.axisX.call($$.xAxis);
-    transitions.axisY.call($$.yAxis);
-    transitions.axisY2.call($$.y2Axis);
-    transitions.axisSubX.call($$.subXAxis);
+c3_axis_fn.redraw = function redraw(duration, isHidden) {
+    var $$ = this.owner,
+        transition = duration ? $$.d3.transition().duration(duration) : null;
+    $$.axes.x.style("opacity", isHidden ? 0 : 1).call($$.xAxis, transition);
+    $$.axes.y.style("opacity", isHidden ? 0 : 1).call($$.yAxis, transition);
+    $$.axes.y2.style("opacity", isHidden ? 0 : 1).call($$.y2Axis, transition);
+    $$.axes.subx.style("opacity", isHidden ? 0 : 1).call($$.subXAxis, transition);
 };
diff --git a/src/color.js b/src/color.js
index 4585d85..9b03830 100644
--- a/src/color.js
+++ b/src/color.js
@@ -4,7 +4,7 @@ import { notEmpty } from './util';
 c3_chart_internal_fn.generateColor = function () {
     var $$ = this, config = $$.config, d3 = $$.d3,
         colors = config.data_colors,
-        pattern = notEmpty(config.color_pattern) ? config.color_pattern : d3.scale.category10().range(),
+        pattern = notEmpty(config.color_pattern) ? config.color_pattern : d3.schemeCategory10,
         callback = config.data_color,
         ids = [];
 
diff --git a/src/config.js b/src/config.js
index 9d89b8b..54b010f 100644
--- a/src/config.js
+++ b/src/config.js
@@ -13,7 +13,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         padding_bottom: undefined,
         resize_auto: true,
         zoom_enabled: false,
-        zoom_extent: undefined,
+        zoom_initialRange: undefined,
         zoom_privileged: false,
         zoom_rescale: false,
         zoom_onzoom: function () {},
@@ -112,7 +112,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         axis_x_min: undefined,
         axis_x_padding: {},
         axis_x_height: undefined,
-        axis_x_extent: undefined,
+        axis_x_selection: undefined,
         axis_x_label: {},
         axis_x_inner: undefined,
         axis_y_show: true,
@@ -128,7 +128,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         axis_y_tick_values: null,
         axis_y_tick_rotate: 0,
         axis_y_tick_count: undefined,
-        axis_y_tick_time_value: undefined,
+        axis_y_tick_time_type: undefined,
         axis_y_tick_time_interval: undefined,
         axis_y_padding: {},
         axis_y_default: undefined,
diff --git a/src/core.js b/src/core.js
index 6976776..d8f8e90 100644
--- a/src/core.js
+++ b/src/core.js
@@ -107,19 +107,18 @@ c3_chart_internal_fn.initParams = function () {
     $$.color = $$.generateColor();
     $$.levelColor = $$.generateLevelColor();
 
-    $$.dataTimeFormat = config.data_xLocaltime ? d3.time.format : d3.time.format.utc;
-    $$.axisTimeFormat = config.axis_x_localtime ? d3.time.format : d3.time.format.utc;
-    $$.defaultAxisTimeFormat = $$.axisTimeFormat.multi([
-        [".%L", function (d) { return d.getMilliseconds(); }],
-        [":%S", function (d) { return d.getSeconds(); }],
-        ["%I:%M", function (d) { return d.getMinutes(); }],
-        ["%I %p", function (d) { return d.getHours(); }],
-        ["%-m/%-d", function (d) { return d.getDay() && d.getDate() !== 1; }],
-        ["%-m/%-d", function (d) { return d.getDate() !== 1; }],
-        ["%-m/%-d", function (d) { return d.getMonth(); }],
-        ["%Y/%-m/%-d", function () { return true; }]
-    ]);
-
+    $$.dataTimeParse = (config.data_xLocaltime ? d3.timeParse : d3.utcParse)($$.config.data_xFormat);
+    $$.axisTimeFormat = config.axis_x_localtime ? d3.timeFormat : d3.utcFormat;
+    $$.defaultAxisTimeFormat = function (date) {
+        if (date.getMilliseconds()) { return d3.timeFormat(".%L")(date); }
+        if (date.getSeconds()) { return d3.timeFormat(":%S")(date); }
+        if (date.getMinutes()) { return d3.timeFormat("%I:%M")(date); }
+        if (date.getHours()) { return d3.timeFormat("%I %p")(date); }
+        if (date.getDay() && date.getDate() !== 1) { return d3.timeFormat("%-m/%-d")(date); }
+        if (date.getDate() !== 1) { return d3.timeFormat("%-m/%-d")(date); }
+        if (date.getMonth()) { return d3.timeFormat("%-m/%-d")(date); }
+        return d3.timeFormat("%Y/%-m/%-d")(date);
+    };
     $$.hiddenTargetIds = [];
     $$.hiddenLegendIds = [];
     $$.focusedTargetIds = [];
@@ -169,10 +168,6 @@ c3_chart_internal_fn.initWithData = function (data) {
 
     $$.axis = new Axis($$);
 
-    if ($$.initPie) { $$.initPie(); }
-    if ($$.initBrush) { $$.initBrush(); }
-    if ($$.initZoom) { $$.initZoom(); }
-
     if (!config.bindto) {
         $$.selectChart = d3.selectAll([]);
     }
@@ -220,10 +215,6 @@ c3_chart_internal_fn.initWithData = function (data) {
     // Save original x domain for zoom update
     $$.orgXDomain = $$.x.domain();
 
-    // Set initialized scales to brush and zoom
-    if ($$.brush) { $$.brush.scale($$.subX); }
-    if (config.zoom_enabled) { $$.zoom.scale($$.x); }
-
     /*-- Basic Elements --*/
 
     // Define svgs
@@ -248,10 +239,16 @@ c3_chart_internal_fn.initWithData = function (data) {
     // Define regions
     main = $$.main = $$.svg.append("g").attr("transform", $$.getTranslate('main'));
 
+    if ($$.initPie) { $$.initPie(); }
     if ($$.initSubchart) { $$.initSubchart(); }
     if ($$.initTooltip) { $$.initTooltip(); }
     if ($$.initLegend) { $$.initLegend(); }
     if ($$.initTitle) { $$.initTitle(); }
+    if ($$.initZoom) { $$.initZoom(); }
+
+    // Update selection based on size and scale
+    // TODO: currently this must be called after initLegend because of update of sizes, but it should be done in initSubchart.
+    if ($$.initSubchartBrush) { $$.initSubchartBrush(); }
 
     /*-- Main Region --*/
 
@@ -275,30 +272,21 @@ c3_chart_internal_fn.initWithData = function (data) {
     // Grid lines
     if (config.grid_lines_front) { $$.initGridLines(); }
 
-    // Cover whole with rects for events
-    $$.initEventRect();
-
     // Define g for chart
     $$.initChartElements();
 
-    // if zoom privileged, insert rect to forefront
-    // TODO: is this needed?
-    main.insert('rect', config.zoom_privileged ? null : 'g.' + CLASS.regions)
-        .attr('class', CLASS.zoomRect)
-        .attr('width', $$.width)
-        .attr('height', $$.height)
-        .style('opacity', 0)
-        .on("dblclick.zoom", null);
-
-    // Set default extent if defined
-    if (config.axis_x_extent) { $$.brush.extent($$.getDefaultExtent()); }
-
     // Add Axis
     $$.axis.init();
 
     // Set targets
     $$.updateTargets($$.data.targets);
 
+    // Cover whole with rects for events
+    $$.initEventRect();
+
+    // Set default extent if defined
+    if (config.axis_x_selection) { $$.brush.selectionAsValue($$.getDefaultSelection()); }
+
     // Draw with targets
     if (binding) {
         $$.updateDimension();
@@ -449,7 +437,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
     var hideAxis = $$.hasArcType();
     var drawArea, drawBar, drawLine, xForText, yForText;
     var duration, durationForExit, durationForAxis;
-    var waitForDraw, flow;
+    var transitionsToWait, waitForDraw, flow, transition;
     var targetsToShow = $$.filterTargetsToShow($$.data.targets), tickValues, i, intervalForCulling, xDomainForZoom;
     var xv = $$.xv.bind($$), cx, cy;
 
@@ -513,7 +501,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
     }
 
     // axes
-    $$.axis.redraw(transitions, hideAxis);
+    $$.axis.redraw(durationForAxis, hideAxis);
 
     // Update axis label
     $$.axis.updateLabels(withTransition);
@@ -545,6 +533,12 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
     xForText = $$.generateXYForText(areaIndices, barIndices, lineIndices, true);
     yForText = $$.generateXYForText(areaIndices, barIndices, lineIndices, false);
 
+    // update circleY based on updated parameters
+    $$.updateCircleY();
+    // generate circle x/y functions depending on updated params
+    cx = ($$.config.axis_rotated ? $$.circleY : $$.circleX).bind($$);
+    cy = ($$.config.axis_rotated ? $$.circleX : $$.circleY).bind($$);
+
     // Update sub domain
     if (withY) {
         $$.subY.domain($$.getYDomain(targetsToShow, 'y'));
@@ -562,6 +556,9 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
       .transition()
         .style('opacity', targetsToShow.length ? 0 : 1);
 
+    // event rect
+    if (withEventRect) { $$.redrawEventRect(); }
+
     // grid
     $$.updateGrid(duration);
 
@@ -574,11 +571,11 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
     // lines, areas and cricles
     $$.updateLine(durationForExit);
     $$.updateArea(durationForExit);
-    $$.updateCircle();
+    $$.updateCircle(cx, cy);
 
     // text
     if ($$.hasDataLabel()) {
-        $$.updateText(durationForExit);
+        $$.updateText(xForText, yForText, durationForExit);
     }
 
     // title
@@ -598,19 +595,6 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
         .selectAll('circle')
         .remove();
 
-    // event rects will redrawn when flow called
-    if (config.interaction_enabled && !options.flow && withEventRect) {
-        $$.redrawEventRect();
-        if ($$.updateZoom) { $$.updateZoom(); }
-    }
-
-    // update circleY based on updated parameters
-    $$.updateCircleY();
-
-    // generate circle x/y functions depending on updated params
-    cx = ($$.config.axis_rotated ? $$.circleY : $$.circleX).bind($$);
-    cy = ($$.config.axis_rotated ? $$.circleX : $$.circleY).bind($$);
-
     if (options.flow) {
         flow = $$.generateFlow({
             targets: targetsToShow,
@@ -627,51 +611,44 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
         });
     }
 
-    if ((duration || flow) && $$.isTabVisible()) { // Only use transition if tab visible. See #938.
-        // transition should be derived from one transition
-        d3.transition().duration(duration).each(function () {
-            var transitionsToWait = [];
-
-            // redraw and gather transitions
+    if ($$.isTabVisible()) { // Only use transition if tab visible. See #938.
+        if (duration) {
+            // transition should be derived from one transition
+            transition = d3.transition().duration(duration);
+            transitionsToWait = [];
             [
-                $$.redrawBar(drawBar, true),
-                $$.redrawLine(drawLine, true),
-                $$.redrawArea(drawArea, true),
-                $$.redrawCircle(cx, cy, true),
-                $$.redrawText(xForText, yForText, options.flow, true),
-                $$.redrawRegion(true),
-                $$.redrawGrid(true),
+                $$.redrawBar(drawBar, true, transition),
+                $$.redrawLine(drawLine, true, transition),
+                $$.redrawArea(drawArea, true, transition),
+                $$.redrawCircle(cx, cy, true, transition),
+                $$.redrawText(xForText, yForText, options.flow, true, transition),
+                $$.redrawRegion(true, transition),
+                $$.redrawGrid(true, transition),
             ].forEach(function (transitions) {
                 transitions.forEach(function (transition) {
                     transitionsToWait.push(transition);
                 });
             });
-
             // Wait for end of transitions to call flow and onrendered callback
             waitForDraw = $$.generateWait();
             transitionsToWait.forEach(function (t) {
                 waitForDraw.add(t);
             });
-        })
-        .call(waitForDraw, function () {
-            if (flow) {
-                flow();
-            }
-            if (config.onrendered) {
-                config.onrendered.call($$);
-            }
-        });
-    }
-    else {
-        $$.redrawBar(drawBar);
-        $$.redrawLine(drawLine);
-        $$.redrawArea(drawArea);
-        $$.redrawCircle(cx, cy);
-        $$.redrawText(xForText, yForText, options.flow);
-        $$.redrawRegion();
-        $$.redrawGrid();
-        if (config.onrendered) {
-            config.onrendered.call($$);
+            waitForDraw(function () {
+                if (flow) { flow(); }
+                if (config.onrendered) { config.onrendered.call($$); }
+            });
+        }
+        else {
+            $$.redrawBar(drawBar);
+            $$.redrawLine(drawLine);
+            $$.redrawArea(drawArea);
+            $$.redrawCircle(cx, cy);
+            $$.redrawText(xForText, yForText, options.flow);
+            $$.redrawRegion();
+            $$.redrawGrid();
+            if (flow) { flow(); }
+            if (config.onrendered) { config.onrendered.call($$); }
         }
     }
 
@@ -689,8 +666,8 @@ c3_chart_internal_fn.updateAndRedraw = function (options) {
     options.withTransform = getOption(options, "withTransform", false);
     options.withLegend = getOption(options, "withLegend", false);
     // NOT same with redraw
-    options.withUpdateXDomain = true;
-    options.withUpdateOrgXDomain = true;
+    options.withUpdateXDomain = getOption(options, "withUpdateXDomain", true);
+    options.withUpdateOrgXDomain = getOption(options, "withUpdateOrgXDomain", true);
     options.withTransitionForExit = false;
     options.withTransitionForTransform = getOption(options, "withTransitionForTransform", options.withTransition);
     // MEMO: this needs to be called before updateLegend and it means this ALWAYS needs to be called)
@@ -832,7 +809,7 @@ c3_chart_internal_fn.transformAll = function (withTransition, transitions) {
 
 c3_chart_internal_fn.updateSvgSize = function () {
     var $$ = this,
-        brush = $$.svg.select(".c3-brush .background");
+        brush = $$.svg.select(".c3-brush .overlay");
     $$.svg.attr('width', $$.currentWidth).attr('height', $$.currentHeight);
     $$.svg.selectAll(['#' + $$.clipId, '#' + $$.clipIdForGrid]).select('rect')
         .attr('width', $$.width)
@@ -850,9 +827,6 @@ c3_chart_internal_fn.updateSvgSize = function () {
     $$.svg.select('#' + $$.clipIdForSubchart).select('rect')
         .attr('width', $$.width)
         .attr('height', brush.size() ? brush.attr('height') : 0);
-    $$.svg.select('.' + CLASS.zoomRect)
-        .attr('width', $$.width)
-        .attr('height', $$.height);
     // MEMO: parent div's height will be bigger than svg when <!DOCTYPE html>
     $$.selectChart.style('max-height', $$.currentHeight + "px");
 };
@@ -925,7 +899,14 @@ c3_chart_internal_fn.bindResize = function () {
             }
             $$.resizeTimeout = window.setTimeout(function () {
                 delete $$.resizeTimeout;
-                $$.api.flush();
+                $$.updateAndRedraw({
+                    withUpdateXDomain: false,
+                    withUpdateOrgXDomain: false,
+                    withTransition: false,
+                    withTransitionForTransform: false,
+                    withLegend: true,
+                });
+                if ($$.brush) { $$.brush.update(); }
             }, 100);
         });
     }
@@ -995,13 +976,13 @@ 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); }
         });
 };
 c3_chart_internal_fn.generateWait = function () {
     var transitionsToWait = [],
-        f = function (transition, callback) {
+        f = function (callback) {
             var timer = setInterval(function () {
                 var done = 0;
                 transitionsToWait.forEach(function (t) {
@@ -1019,7 +1000,7 @@ c3_chart_internal_fn.generateWait = function () {
                     clearInterval(timer);
                     if (callback) { callback(); }
                 }
-            }, 10);
+            }, 50);
         };
     f.add = function (transition) {
         transitionsToWait.push(transition);
@@ -1032,7 +1013,7 @@ c3_chart_internal_fn.parseDate = function (date) {
     if (date instanceof Date) {
         parsedDate = date;
     } else if (typeof date === 'string') {
-        parsedDate = $$.dataTimeFormat($$.config.data_xFormat).parse(date);
+        parsedDate = $$.dataTimeParse(date);
     } else if (typeof date === 'object') {
         parsedDate = new Date(+date);
     } else if (typeof date === 'number' && !isNaN(date)) {
diff --git a/src/data.convert.js b/src/data.convert.js
index 0edac36..f3e435e 100644
--- a/src/data.convert.js
+++ b/src/data.convert.js
@@ -3,7 +3,7 @@ import { isValue, isUndefined, isDefined, notEmpty } from './util';
 
 c3_chart_internal_fn.convertUrlToData = function (url, mimeType, headers, keys, done) {
     var $$ = this, type = mimeType ? mimeType : 'csv';
-    var req = $$.d3.xhr(url);
+    var req = $$.d3.request(url);
     if (headers) {
         Object.keys(headers).forEach(function (header) {
             req.header(header, headers[header]);
@@ -26,22 +26,22 @@ c3_chart_internal_fn.convertUrlToData = function (url, mimeType, headers, keys,
     });
 };
 c3_chart_internal_fn.convertXsvToData = function (xsv, parser) {
-    var rows = parser.parseRows(xsv), d;
+    var rows = parser(xsv), d;
     if (rows.length === 1) {
         d = [{}];
         rows[0].forEach(function (id) {
             d[0][id] = null;
         });
     } else {
-        d = parser.parse(xsv);
+        d = parser(xsv);
     }
     return d;
 };
 c3_chart_internal_fn.convertCsvToData = function (csv) {
-    return this.convertXsvToData(csv, this.d3.csv);
+    return this.convertXsvToData(csv, this.d3.csvParse);
 };
 c3_chart_internal_fn.convertTsvToData = function (tsv) {
-    return this.convertXsvToData(tsv, this.d3.tsv);
+    return this.convertXsvToData(tsv, this.d3.tsvParse);
 };
 c3_chart_internal_fn.convertJsonToData = function (json, keys) {
     var $$ = this,
diff --git a/src/data.js b/src/data.js
index a973b0e..e7009b6 100644
--- a/src/data.js
+++ b/src/data.js
@@ -23,11 +23,6 @@ c3_chart_internal_fn.getXValuesOfXKey = function (key, targets) {
     });
     return xValues;
 };
-c3_chart_internal_fn.getIndexByX = function (x) {
-    var $$ = this,
-        data = $$.filterByX($$.data.targets, x);
-    return data.length ? data[0].index : null;
-};
 c3_chart_internal_fn.getXValue = function (id, i) {
     var $$ = this;
     return id in $$.data.xs && $$.data.xs[id] && isValue($$.data.xs[id][i]) ? $$.data.xs[id][i] : i;
@@ -47,12 +42,6 @@ c3_chart_internal_fn.addXs = function (xs) {
         $$.config.data_xs[id] = xs[id];
     });
 };
-c3_chart_internal_fn.hasMultipleX = function (xs) {
-    return this.d3.set(Object.keys(xs).map(function (id) { return xs[id]; })).size() > 1;
-};
-c3_chart_internal_fn.isMultipleX = function () {
-    return notEmpty(this.config.data_xs) || !this.config.data_xSort || this.hasType('scatter');
-};
 c3_chart_internal_fn.addName = function (data) {
     var $$ = this, name;
     if (data) {
@@ -104,48 +93,10 @@ c3_chart_internal_fn.cloneTarget = function (target) {
         })
     };
 };
-c3_chart_internal_fn.updateXs = function () {
-    var $$ = this;
-    if ($$.data.targets.length) {
-        $$.xs = [];
-        $$.data.targets[0].values.forEach(function (v) {
-            $$.xs[v.index] = v.x;
-        });
-    }
-};
-c3_chart_internal_fn.getPrevX = function (i) {
-    var x = this.xs[i - 1];
-    return typeof x !== 'undefined' ? x : null;
-};
-c3_chart_internal_fn.getNextX = function (i) {
-    var x = this.xs[i + 1];
-    return typeof x !== 'undefined' ? x : null;
-};
 c3_chart_internal_fn.getMaxDataCount = function () {
     var $$ = this;
     return $$.d3.max($$.data.targets, function (t) { return t.values.length; });
 };
-c3_chart_internal_fn.getMaxDataCountTarget = function (targets) {
-    var length = targets.length, max = 0, maxTarget;
-    if (length > 1) {
-        targets.forEach(function (t) {
-            if (t.values.length > max) {
-                maxTarget = t;
-                max = t.values.length;
-            }
-        });
-    } else {
-        maxTarget = length ? targets[0] : null;
-    }
-    return maxTarget;
-};
-c3_chart_internal_fn.getEdgeX = function (targets) {
-    var $$ = this;
-    return !targets.length ? [0, 0] : [
-        $$.d3.min(targets, function (t) { return t.values[0].x; }),
-        $$.d3.max(targets, function (t) { return t.values[t.values.length - 1].x; })
-    ];
-};
 c3_chart_internal_fn.mapToIds = function (targets) {
     return targets.map(function (d) { return d.id; });
 };
@@ -309,19 +260,6 @@ c3_chart_internal_fn.isNoneArc = function (d) {
 c3_chart_internal_fn.isArc = function (d) {
     return 'data' in d && this.hasTarget(this.data.targets, d.data.id);
 };
-c3_chart_internal_fn.findSameXOfValues = function (values, index) {
-    var i, targetX = values[index].x, sames = [];
-    for (i = index - 1; i >= 0; i--) {
-        if (targetX !== values[i].x) { break; }
-        sames.push(values[i]);
-    }
-    for (i = index; i < values.length; i++) {
-        if (targetX !== values[i].x) { break; }
-        sames.push(values[i]);
-    }
-    return sames;
-};
-
 c3_chart_internal_fn.findClosestFromTargets = function (targets, pos) {
     var $$ = this, candidates;
 
@@ -339,7 +277,7 @@ c3_chart_internal_fn.findClosest = function (values, pos) {
     // find mouseovering bar
     values.filter(function (v) { return v && $$.isBarType(v.id); }).forEach(function (v) {
         var shape = $$.main.select('.' + CLASS.bars + $$.getTargetSelectorSuffix(v.id) + ' .' + CLASS.bar + '-' + v.index).node();
-        if (!closest && $$.isWithinBar(shape)) {
+        if (!closest && $$.isWithinBar($$.d3.mouse(shape), shape)) {
             closest = v;
         }
     });
diff --git a/src/domain.js b/src/domain.js
index 5439b57..62c9bbf 100644
--- a/src/domain.js
+++ b/src/domain.js
@@ -209,13 +209,12 @@ c3_chart_internal_fn.updateXDomain = function (targets, withUpdateXDomain, withU
     if (withUpdateOrgXDomain) {
         $$.x.domain(domain ? domain : $$.d3.extent($$.getXDomain(targets)));
         $$.orgXDomain = $$.x.domain();
-        if (config.zoom_enabled) { $$.zoom.scale($$.x).updateScaleExtent(); }
+        if (config.zoom_enabled) { $$.zoom.update(); }
         $$.subX.domain($$.x.domain());
-        if ($$.brush) { $$.brush.scale($$.subX); }
+        if ($$.brush) { $$.brush.updateScale($$.subX); }
     }
     if (withUpdateXDomain) {
-        $$.x.domain(domain ? domain : (!$$.brush || $$.brush.empty()) ? $$.orgXDomain : $$.brush.extent());
-        if (config.zoom_enabled) { $$.zoom.scale($$.x).updateScaleExtent(); }
+        $$.x.domain(domain ? domain : (!$$.brush || $$.brush.empty()) ? $$.orgXDomain : $$.brush.selectionAsValue());
     }
 
     // Trim domain when too big by zoom mousemove event
diff --git a/src/drag.js b/src/drag.js
index dce7bcf..f4f8345 100644
--- a/src/drag.js
+++ b/src/drag.js
@@ -7,8 +7,7 @@ c3_chart_internal_fn.drag = function (mouse) {
     var sx, sy, mx, my, minX, maxX, minY, maxY;
 
     if ($$.hasArcType()) { return; }
-    if (! config.data_selection_enabled) { return; } // do nothing if not selectable
-    if (config.zoom_enabled && ! $$.zoom.altDomain) { return; } // skip if zoomable because of conflict drag dehavior
+    if (!config.data_selection_enabled) { return; } // do nothing if not selectable
     if (!config.data_selection_multiple) { return; } // skip when single selection because drag is used for multiple selection
 
     sx = $$.dragStart[0];
diff --git a/src/grid.js b/src/grid.js
index ddf417e..0927798 100644
--- a/src/grid.js
+++ b/src/grid.js
@@ -47,29 +47,47 @@ c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
         'y1': 0,
         'y2': $$.height
     };
+    $$.xgridAttr.opacity = function () {
+        var pos = +d3.select(this).attr(config.axis_rotated ? 'y1' : 'x1');
+        return pos === (config.axis_rotated ? $$.height : 0) ? 0 : 1;
+    };
 
-    $$.xgrid = $$.main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid)
+    var xgrid = $$.main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid)
         .data(xgridData);
-    $$.xgrid.enter().append('line').attr("class", CLASS.xgrid);
+    var xgridEnter = xgrid.enter().append('line')
+        .attr("class", CLASS.xgrid)
+        .attr('x1', $$.xgridAttr.x1)
+        .attr('x2', $$.xgridAttr.x2)
+        .attr('y1', $$.xgridAttr.y1)
+        .attr('y2', $$.xgridAttr.y2)
+        .style("opacity", 0);
+    $$.xgrid = xgridEnter.merge(xgrid);
     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
+            .attr('x1', $$.xgridAttr.x1)
+            .attr('x2', $$.xgridAttr.x2)
+            .attr('y1', $$.xgridAttr.y1)
+            .attr('y2', $$.xgridAttr.y2)
+            .style("opacity", $$.xgridAttr.opacity);
     }
-    $$.xgrid.exit().remove();
+    xgrid.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 ygrid = $$.main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid)
         .data(gridValues);
-    $$.ygrid.enter().append('line')
+    var ygridEnter = ygrid.enter().append('line')
+        // TODO: x1, x2, y1, y2, opacity need to be set here maybe
         .attr('class', CLASS.ygrid);
-    $$.ygrid.attr("x1", config.axis_rotated ? $$.y : 0)
+    $$.ygrid = ygridEnter.merge(ygrid);
+    $$.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();
+    ygrid.exit().remove();
     $$.smoothLines($$.ygrid, 'grid');
 };
 
@@ -87,7 +105,9 @@ 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,
+        xv = $$.xv.bind($$), yv = $$.yv.bind($$),
+        xGridTextX = $$.xGridTextX.bind($$), yGridTextX = $$.yGridTextX.bind($$);
 
     // hide if arc type
     $$.grid.style('visibility', $$.hasArcType() ? 'hidden' : 'visible');
@@ -96,23 +116,30 @@ 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')
+        .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", 0);
-    xgridLine.append('text')
+    xgridLineEnter.append('text')
         .attr("text-anchor", $$.gridTextAnchor)
         .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
+        .attr("x", config.axis_rotated ? yGridTextX : xGridTextX)
+        .attr("y", xv)
         .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,21 +147,27 @@ 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')
+        .attr("x1", config.axis_rotated ? yv : 0)
+        .attr("x2", config.axis_rotated ? yv : $$.width)
+        .attr("y1", config.axis_rotated ? 0 : yv)
+        .attr("y2", config.axis_rotated ? $$.height : yv)
         .style("opacity", 0);
-    ygridLine.append('text')
+    ygridLineEnter.append('text')
         .attr("text-anchor", $$.gridTextAnchor)
         .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
+        .attr("x", config.axis_rotated ? xGridTextX : yGridTextX)
+        .attr("y", yv)
         .attr('dx', $$.gridTextDx)
         .attr('dy', -5)
         .style("opacity", 0);
     // update
-    yv = $$.yv.bind($$);
+    $$.ygridLines = ygridLineEnter.merge(ygridLine);
     $$.ygridLines.select('line')
       .transition().duration(duration)
         .attr("x1", config.axis_rotated ? yv : 0)
@@ -149,22 +182,22 @@ 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();
 };
-c3_chart_internal_fn.redrawGrid = function (withTransition) {
+c3_chart_internal_fn.redrawGrid = function (withTransition, transition) {
     var $$ = this, config = $$.config, xv = $$.xv.bind($$),
         lines = $$.xgridLines.select('line'),
         texts = $$.xgridLines.select('text');
     return [
-        (withTransition ? lines.transition() : lines)
+        (withTransition ? lines.transition(transition) : 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(transition) : texts)
             .attr("x", config.axis_rotated ? $$.yGridTextX.bind($$) : $$.xGridTextX.bind($$))
             .attr("y", xv)
             .text(function (d) { return d.text; })
diff --git a/src/interaction.js b/src/interaction.js
index a51f6de..0a823ba 100644
--- a/src/interaction.js
+++ b/src/interaction.js
@@ -2,233 +2,34 @@ import CLASS from './class';
 import { c3_chart_internal_fn } from './core';
 
 c3_chart_internal_fn.initEventRect = function () {
-    var $$ = this;
+    var $$ = this, config = $$.config;
+
     $$.main.select('.' + CLASS.chart).append("g")
         .attr("class", CLASS.eventRects)
         .style('fill-opacity', 0);
-};
-c3_chart_internal_fn.redrawEventRect = function () {
-    var $$ = this, config = $$.config,
-        eventRectUpdate, maxDataCountTarget,
-        isMultipleX = $$.isMultipleX();
-
-    // rects for mouseover
-    var eventRects = $$.main.select('.' + CLASS.eventRects)
-            .style('cursor', config.zoom_enabled ? config.axis_rotated ? 'ns-resize' : 'ew-resize' : null)
-            .classed(CLASS.eventRectsMultiple, isMultipleX)
-            .classed(CLASS.eventRectsSingle, !isMultipleX);
-
-    // clear old rects
-    eventRects.selectAll('.' + CLASS.eventRect).remove();
-
-    // open as public variable
-    $$.eventRect = eventRects.selectAll('.' + CLASS.eventRect);
-
-    if (isMultipleX) {
-        eventRectUpdate = $$.eventRect.data([0]);
-        // enter : only one rect will be added
-        $$.generateEventRectsForMultipleXs(eventRectUpdate.enter());
-        // update
-        $$.updateEventRect(eventRectUpdate);
-        // exit : not needed because always only one rect exists
-    }
-    else {
-        // Set data and update $$.eventRect
-        maxDataCountTarget = $$.getMaxDataCountTarget($$.data.targets);
-        eventRects.datum(maxDataCountTarget ? maxDataCountTarget.values : []);
-        $$.eventRect = eventRects.selectAll('.' + CLASS.eventRect);
-        eventRectUpdate = $$.eventRect.data(function (d) { return d; });
-        // enter
-        $$.generateEventRectsForSingleX(eventRectUpdate.enter());
-        // update
-        $$.updateEventRect(eventRectUpdate);
-        // exit
-        eventRectUpdate.exit().remove();
-    }
-};
-c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) {
-    var $$ = this, config = $$.config,
-        x, y, w, h, rectW, rectX;
-
-    // set update selection if null
-    eventRectUpdate = eventRectUpdate || $$.eventRect.data(function (d) { return d; });
-
-    if ($$.isMultipleX()) {
-        // TODO: rotated not supported yet
-        x = 0;
-        y = 0;
-        w = $$.width;
-        h = $$.height;
-    }
-    else {
-        if (($$.isCustomX() || $$.isTimeSeries()) && !$$.isCategorized()) {
-
-            // update index for x that is used by prevX and nextX
-            $$.updateXs();
-
-            rectW = function (d) {
-                var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index);
-
-                // if there this is a single data point make the eventRect full width (or height)
-                if (prevX === null && nextX === null) {
-                    return config.axis_rotated ? $$.height : $$.width;
-                }
-
-                if (prevX === null) { prevX = $$.x.domain()[0]; }
-                if (nextX === null) { nextX = $$.x.domain()[1]; }
-
-                return Math.max(0, ($$.x(nextX) - $$.x(prevX)) / 2);
-            };
-            rectX = function (d) {
-                var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index),
-                    thisX = $$.data.xs[d.id][d.index];
-
-                // if there this is a single data point position the eventRect at 0
-                if (prevX === null && nextX === null) {
-                    return 0;
-                }
-
-                if (prevX === null) { prevX = $$.x.domain()[0]; }
-
-                return ($$.x(thisX) + $$.x(prevX)) / 2;
-            };
-        } else {
-            rectW = $$.getEventRectWidth();
-            rectX = function (d) {
-                return $$.x(d.x) - (rectW / 2);
-            };
+    $$.eventRect = $$.main.select('.' + CLASS.eventRects).append('rect')
+        .attr('class', CLASS.eventRect);
+
+    // event rect handle zoom event as well
+    if (config.zoom_enabled && $$.zoom) {
+        $$.eventRect.call($$.zoom).on("dblclick.zoom", null);
+        if (config.zoom_initialRange) {
+            // WORKAROUND: Add transition to apply transform immediately when no subchart
+            $$.eventRect.transition().duration(0).call(
+                $$.zoom.transform, $$.zoomTransform(config.zoom_initialRange)
+            );
         }
-        x = config.axis_rotated ? 0 : rectX;
-        y = config.axis_rotated ? rectX : 0;
-        w = config.axis_rotated ? $$.width : rectW;
-        h = config.axis_rotated ? rectW : $$.height;
     }
-
-    eventRectUpdate
-        .attr('class', $$.classEvent.bind($$))
-        .attr("x", x)
-        .attr("y", y)
-        .attr("width", w)
-        .attr("height", h);
-};
-c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
-    var $$ = this, d3 = $$.d3, config = $$.config;
-    eventRectEnter.append("rect")
-        .attr("class", $$.classEvent.bind($$))
-        .style("cursor", config.data_selection_enabled && config.data_selection_grouped ? "pointer" : null)
-        .on('mouseover', function (d) {
-            var index = d.index;
-
-            if ($$.dragging || $$.flowing) { return; } // do nothing while dragging/flowing
-            if ($$.hasArcType()) { return; }
-
-            // Expand shapes for selection
-            if (config.point_focus_expand_enabled) { $$.expandCircles(index, null, true); }
-            $$.expandBars(index, null, true);
-
-            // Call event handler
-            $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
-                config.data_onmouseover.call($$.api, d);
-            });
-        })
-        .on('mouseout', function (d) {
-            var index = d.index;
-            if (!$$.config) { return; } // chart is destroyed
-            if ($$.hasArcType()) { return; }
-            $$.hideXGridFocus();
-            $$.hideTooltip();
-            // Undo expanded shapes
-            $$.unexpandCircles();
-            $$.unexpandBars();
-            // Call event handler
-            $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
-                config.data_onmouseout.call($$.api, d);
-            });
-        })
-        .on('mousemove', function (d) {
-            var selectedData, index = d.index,
-                eventRect = $$.svg.select('.' + CLASS.eventRect + '-' + index);
-
-            if ($$.dragging || $$.flowing) { return; } // do nothing while dragging/flowing
-            if ($$.hasArcType()) { return; }
-
-            if ($$.isStepType(d) && $$.config.line_step_type === 'step-after' && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
-                index -= 1;
-            }
-
-            // Show tooltip
-            selectedData = $$.filterTargetsToShow($$.data.targets).map(function (t) {
-                return $$.addName($$.getValueOnIndex(t.values, index));
-            });
-
-            if (config.tooltip_grouped) {
-                $$.showTooltip(selectedData, this);
-                $$.showXGridFocus(selectedData);
-            }
-
-            if (config.tooltip_grouped && (!config.data_selection_enabled || config.data_selection_grouped)) {
-                return;
-            }
-
-            $$.main.selectAll('.' + CLASS.shape + '-' + index)
-                .each(function () {
-                    d3.select(this).classed(CLASS.EXPANDED, true);
-                    if (config.data_selection_enabled) {
-                        eventRect.style('cursor', config.data_selection_grouped ? 'pointer' : null);
-                    }
-                    if (!config.tooltip_grouped) {
-                        $$.hideXGridFocus();
-                        $$.hideTooltip();
-                        if (!config.data_selection_grouped) {
-                            $$.unexpandCircles(index);
-                            $$.unexpandBars(index);
-                        }
-                    }
-                })
-                .filter(function (d) {
-                    return $$.isWithinShape(this, d);
-                })
-                .each(function (d) {
-                    if (config.data_selection_enabled && (config.data_selection_grouped || config.data_selection_isselectable(d))) {
-                        eventRect.style('cursor', 'pointer');
-                    }
-                    if (!config.tooltip_grouped) {
-                        $$.showTooltip([d], this);
-                        $$.showXGridFocus([d]);
-                        if (config.point_focus_expand_enabled) { $$.expandCircles(index, d.id, true); }
-                        $$.expandBars(index, d.id, true);
-                    }
-                });
-        })
-        .on('click', function (d) {
-            var index = d.index;
-            if ($$.hasArcType() || !$$.toggleShape) { return; }
-            if ($$.cancelClick) {
-                $$.cancelClick = false;
-                return;
-            }
-            if ($$.isStepType(d) && config.line_step_type === 'step-after' && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
-                index -= 1;
-            }
-            $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
-                if (config.data_selection_grouped || $$.isWithinShape(this, d)) {
-                    $$.toggleShape(this, d, index);
-                    $$.config.data_onclick.call($$.api, d, this);
-                }
-            });
-        })
-        .call(
-            config.data_selection_draggable && $$.drag ? (
-                d3.behavior.drag().origin(Object)
-                    .on('drag', function () { $$.drag(d3.mouse(this)); })
-                    .on('dragstart', function () { $$.dragstart(d3.mouse(this)); })
-                    .on('dragend', function () { $$.dragend(); })
-            ) : function () {}
-        );
 };
+c3_chart_internal_fn.redrawEventRect = function () {
+    var $$ = this, d3 = $$.d3, config = $$.config,
+        x, y, w, h;
 
-c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter) {
-    var $$ = this, d3 = $$.d3, config = $$.config;
+    // TODO: rotated not supported yet
+    x = 0;
+    y = 0;
+    w = $$.width;
+    h = $$.height;
 
     function mouseout() {
         $$.svg.select('.' + CLASS.eventRect).style('cursor', null);
@@ -238,24 +39,27 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
         $$.unexpandBars();
     }
 
-    eventRectEnter.append('rect')
-        .attr('x', 0)
-        .attr('y', 0)
-        .attr('width', $$.width)
-        .attr('height', $$.height)
-        .attr('class', CLASS.eventRect)
-        .on('mouseout', function () {
-            if (!$$.config) { return; } // chart is destroyed
+    // rects for mouseover
+    $$.main.select('.' + CLASS.eventRects)
+        .style('cursor', config.zoom_enabled ? config.axis_rotated ? 'ns-resize' : 'ew-resize' : null);
+
+    $$.eventRect
+        .attr('x', x)
+        .attr('y', y)
+        .attr('width', w)
+        .attr('height', h)
+        .on('mouseout',  config.interaction_enabled ? function () {
+            if (!config) { return; } // chart is destroyed
             if ($$.hasArcType()) { return; }
             mouseout();
-        })
-        .on('mousemove', function () {
-            var targetsToShow = $$.filterTargetsToShow($$.data.targets);
-            var mouse, closest, sameXData, selectedData;
+        } : null)
+        .on('mousemove', config.interaction_enabled ? function () {
+            var targetsToShow, mouse, closest, sameXData, selectedData;
 
             if ($$.dragging) { return; } // do nothing when dragging
             if ($$.hasArcType(targetsToShow)) { return; }
 
+            targetsToShow = $$.filterTargetsToShow($$.data.targets);
             mouse = d3.mouse(this);
             closest = $$.findClosestFromTargets(targetsToShow, mouse);
 
@@ -283,7 +87,10 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
 
             // expand points
             if (config.point_focus_expand_enabled) {
-                $$.expandCircles(closest.index, closest.id, true);
+                $$.unexpandCircles();
+                selectedData.forEach(function (d) {
+                    $$.expandCircles(d.index, d.id, false);
+                });
             }
             $$.expandBars(closest.index, closest.id, true);
 
@@ -298,37 +105,48 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
                     $$.mouseover = closest;
                 }
             }
-        })
-        .on('click', function () {
-            var targetsToShow = $$.filterTargetsToShow($$.data.targets);
-            var mouse, closest;
+        } : null)
+        .on('click', config.interaction_enabled ? function () {
+            var targetsToShow, mouse, closest, sameXData;
             if ($$.hasArcType(targetsToShow)) { return; }
 
+            targetsToShow = $$.filterTargetsToShow($$.data.targets);
             mouse = d3.mouse(this);
             closest = $$.findClosestFromTargets(targetsToShow, mouse);
             if (! closest) { return; }
             // select if selection enabled
             if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) {
-                $$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(closest.id)).selectAll('.' + CLASS.shape + '-' + closest.index).each(function () {
-                    if (config.data_selection_grouped || $$.isWithinShape(this, closest)) {
-                        $$.toggleShape(this, closest, closest.index);
-                        $$.config.data_onclick.call($$.api, closest, this);
-                    }
+                if ($$.isScatterType(closest) || !config.data_selection_grouped) {
+                    sameXData = [closest];
+                } else {
+                    sameXData = $$.filterByX(targetsToShow, closest.x);
+                }
+                sameXData.forEach(function (d) {
+                    $$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(d.id)).selectAll('.' + CLASS.shape + '-' + d.index).each(function () {
+                        if (config.data_selection_grouped || $$.isWithinShape(this, d)) {
+                            $$.toggleShape(this, d, d.index);
+                            config.data_onclick.call($$.api, d, this);
+                        }
+                    });
                 });
             }
-        })
+        } : null)
         .call(
-            config.data_selection_draggable && $$.drag ? (
-                d3.behavior.drag().origin(Object)
+            config.interaction_enabled && config.data_selection_draggable && $$.drag ? (
+                d3.drag()
                     .on('drag', function () { $$.drag(d3.mouse(this)); })
-                    .on('dragstart', function () { $$.dragstart(d3.mouse(this)); })
-                    .on('dragend', function () { $$.dragend(); })
+                    .on('start', function () { $$.dragstart(d3.mouse(this)); })
+                    .on('end', function () { $$.dragend(); })
             ) : function () {}
         );
 };
-c3_chart_internal_fn.dispatchEvent = function (type, index, mouse) {
+c3_chart_internal_fn.getMousePosition = function (data) {
+    var $$ = this;
+    return [$$.x(data.x), $$.getYScale(data.id)(data.value)];
+};
+c3_chart_internal_fn.dispatchEvent = function (type, mouse) {
     var $$ = this,
-        selector = '.' + CLASS.eventRect + (!$$.isMultipleX() ? '-' + index : ''),
+        selector = '.' + CLASS.eventRect,
         eventRect = $$.main.select(selector).node(),
         box = eventRect.getBoundingClientRect(),
         x = box.left + (mouse ? mouse[0] : 0),
diff --git a/src/region.js b/src/region.js
index 83ca16e..2497cfd 100644
--- a/src/region.js
+++ b/src/region.js
@@ -14,36 +14,27 @@ c3_chart_internal_fn.updateRegion = function (duration) {
     // hide if arc type
     $$.region.style('visibility', $$.hasArcType() ? 'hidden' : 'visible');
 
-    $$.mainRegion = $$.main.select('.' + CLASS.regions).selectAll('.' + CLASS.region)
+    var mainRegion = $$.main.select('.' + CLASS.regions).selectAll('.' + CLASS.region)
         .data(config.regions);
-    $$.mainRegion.enter().append('g')
-      .append('rect')
+    var mainRegionEnter = mainRegion.enter().append('rect')
+        .attr("x", $$.regionX.bind($$))
+        .attr("y", $$.regionY.bind($$))
+        .attr("width", $$.regionWidth.bind($$))
+        .attr("height", $$.regionHeight.bind($$))
         .style("fill-opacity", 0);
-    $$.mainRegion
+    $$.mainRegion = mainRegionEnter.merge(mainRegion)
         .attr('class', $$.classRegion.bind($$));
-    $$.mainRegion.exit().transition().duration(duration)
+    mainRegion.exit().transition().duration(duration)
         .style("opacity", 0)
         .remove();
 };
-c3_chart_internal_fn.redrawRegion = function (withTransition) {
-    var $$ = this,
-        regions = $$.mainRegion.selectAll('rect').each(function () {
-            // data is binded to g and it's not transferred to rect (child node) automatically,
-            // then data of each rect has to be updated manually.
-            // TODO: there should be more efficient way to solve this?
-            var parentData = $$.d3.select(this.parentNode).datum();
-            $$.d3.select(this).datum(parentData);
-        }),
-        x = $$.regionX.bind($$),
-        y = $$.regionY.bind($$),
-        w = $$.regionWidth.bind($$),
-        h = $$.regionHeight.bind($$);
-    return [
-        (withTransition ? regions.transition() : regions)
-            .attr("x", x)
-            .attr("y", y)
-            .attr("width", w)
-            .attr("height", h)
+c3_chart_internal_fn.redrawRegion = function (withTransition, transition) {
+    var $$ = this, regions = $$.mainRegion;
+    return [(withTransition ? regions.transition(transition) : regions)
+            .attr("x", $$.regionX.bind($$))
+            .attr("y", $$.regionY.bind($$))
+            .attr("width", $$.regionWidth.bind($$))
+            .attr("height", $$.regionHeight.bind($$))
             .style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; })
     ];
 };
diff --git a/src/scale.js b/src/scale.js
index 85fa792..83dda04 100644
--- a/src/scale.js
+++ b/src/scale.js
@@ -1,7 +1,7 @@
 import { c3_chart_internal_fn } from './core';
 
 c3_chart_internal_fn.getScale = function (min, max, forTimeseries) {
-    return (forTimeseries ? this.d3.time.scale() : this.d3.scale.linear()).range([min, max]);
+    return (forTimeseries ? this.d3.scaleTime() : this.d3.scaleLinear()).range([min, max]);
 };
 c3_chart_internal_fn.getX = function (min, max, domain, offset) {
     var $$ = this,
@@ -83,8 +83,7 @@ c3_chart_internal_fn.updateScales = function () {
 
     // Set initialized scales to brush and zoom
     if (!forInit) {
-        if ($$.brush) { $$.brush.scale($$.subX); }
-        if (config.zoom_enabled) { $$.zoom.scale($$.x); }
+        if ($$.brush) { $$.brush.updateScale($$.subX); }
     }
     // update for arc
     if ($$.updateArc) { $$.updateArc(); }
diff --git a/src/shape.bar.js b/src/shape.bar.js
index e71f89f..79deffe 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,20 +31,20 @@ 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 mainBar = $$.main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
         .data(barData);
-    $$.mainBar.enter().append('path')
+    var mainBarEnter = mainBar.enter().append('path')
         .attr("class", classBar)
         .style("stroke", color)
         .style("fill", color);
-    $$.mainBar
+    $$.mainBar = mainBarEnter.merge(mainBar)
         .style("opacity", initialOpacity);
-    $$.mainBar.exit().transition().duration(durationForExit)
-        .remove();
+    mainBar.exit().transition().duration(durationForExit)
+        .style("opacity", 0);
 };
-c3_chart_internal_fn.redrawBar = function (drawBar, withTransition) {
+c3_chart_internal_fn.redrawBar = function (drawBar, withTransition, transition) {
     return [
-        (withTransition ? this.mainBar.transition(Math.random().toString()) : this.mainBar)
+        (withTransition ? this.mainBar.transition(transition) : this.mainBar)
             .attr('d', drawBar)
             .style("stroke", this.color)
             .style("fill", this.color)
@@ -116,8 +116,8 @@ c3_chart_internal_fn.generateGetBarPoints = function (barIndices, isSub) {
         ];
     };
 };
-c3_chart_internal_fn.isWithinBar = function (that) {
-    var mouse = this.d3.mouse(that), box = that.getBoundingClientRect(),
+c3_chart_internal_fn.isWithinBar = function (mouse, that) {
+    var box = that.getBoundingClientRect(),
         seg0 = that.pathSegList.getItem(0), seg1 = that.pathSegList.getItem(1),
         x = Math.min(seg0.x, seg1.x), y = Math.min(seg0.y, seg1.y),
         w = box.width, h = box.height, offset = 2,
diff --git a/src/shape.js b/src/shape.js
index 930b422..84917b7 100644
--- a/src/shape.js
+++ b/src/shape.js
@@ -73,14 +73,37 @@ c3_chart_internal_fn.isWithinShape = function (that, d) {
         isWithin = $$.isStepType(d) ? $$.isWithinStep(that, $$.getYScale(d.id)(d.value)) : $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
     }
     else if (that.nodeName === 'path') {
-        isWithin = shape.classed(CLASS.bar) ? $$.isWithinBar(that) : true;
+        isWithin = shape.classed(CLASS.bar) ? $$.isWithinBar($$.d3.mouse(that), that) : true;
     }
     return isWithin;
 };
 
 
 c3_chart_internal_fn.getInterpolate = function (d) {
-    var $$ = this,
-        interpolation = $$.isInterpolationType($$.config.spline_interpolation_type) ? $$.config.spline_interpolation_type : 'cardinal';
-    return $$.isSplineType(d) ? interpolation : $$.isStepType(d) ? $$.config.line_step_type : "linear";
+    var $$ = this, d3 = $$.d3,
+        types = {
+            'linear': d3.curveLinear,
+            'linear-closed': d3.curveLinearClosed,
+            'basis': d3.curveBasis,
+            'basis-open': d3.curveBasisOpen,
+            'basis-closed': d3.curveBasisClosed,
+            'bundle': d3.curveBundle,
+            'cardinal': d3.curveCardinal,
+            'cardinal-open': d3.curveCardinalOpen,
+            'cardinal-closed': d3.curveCardinalClosed,
+            'monotone': d3.curveMonotoneX,
+            'step': d3.curveStep,
+        },
+        type;
+
+    if ($$.isSplineType(d)) {
+        type = types[$$.config.spline_interpolation_type] || types.cardinal;
+    }
+    else if ($$.isStepType(d)) {
+        type = types[$$.config.line_step_type];
+    }
+    else {
+        type = types.linear;
+    }
+    return type;
 };
diff --git a/src/shape.line.js b/src/shape.line.js
index bdb03c7..785aa33 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,22 +45,21 @@ 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 mainLine = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
         .data($$.lineData.bind($$));
-    $$.mainLine.enter().append('path')
+    var mainLineEnter = mainLine.enter().append('path')
         .attr('class', $$.classLine.bind($$))
         .style("stroke", $$.color);
-    $$.mainLine
+    $$.mainLine = mainLineEnter.merge(mainLine)
         .style("opacity", $$.initialOpacity.bind($$))
         .style('shape-rendering', function (d) { return $$.isStepType(d) ? 'crispEdges' : ''; })
         .attr('transform', null);
-    $$.mainLine.exit().transition().duration(durationForExit)
-        .style('opacity', 0)
-        .remove();
+    mainLine.exit().transition().duration(durationForExit)
+        .style('opacity', 0);
 };
-c3_chart_internal_fn.redrawLine = function (drawLine, withTransition) {
+c3_chart_internal_fn.redrawLine = function (drawLine, withTransition, transition) {
     return [
-        (withTransition ? this.mainLine.transition(Math.random().toString()) : this.mainLine)
+        (withTransition ? this.mainLine.transition(transition) : this.mainLine)
             .attr("d", drawLine)
             .style("stroke", this.color)
             .style("opacity", 1)
@@ -68,7 +67,7 @@ c3_chart_internal_fn.redrawLine = function (drawLine, withTransition) {
 };
 c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) {
     var $$ = this, config = $$.config,
-        line = $$.d3.svg.line(),
+        line = $$.d3.line(),
         getPoints = $$.generateGetLinePoints(lineIndices, isSub),
         yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale,
         xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); },
@@ -86,7 +85,7 @@ c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) {
                 path = $$.lineWithRegions(values, x, y, config.data_regions[d.id]);
             } else {
                 if ($$.isStepType(d)) { values = $$.convertValuesToStep(values); }
-                path = line.interpolate($$.getInterpolate(d))(values);
+                path = line.curve($$.getInterpolate(d))(values);
             }
         } else {
             if (values[0]) {
@@ -222,28 +221,27 @@ 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 mainArea = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
         .data($$.lineData.bind($$));
-    $$.mainArea.enter().append('path')
+    var mainAreaEnter = mainArea.enter().append('path')
         .attr("class", $$.classArea.bind($$))
         .style("fill", $$.color)
         .style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; });
-    $$.mainArea
+    $$.mainArea = mainAreaEnter.merge(mainArea)
         .style("opacity", $$.orgAreaOpacity);
-    $$.mainArea.exit().transition().duration(durationForExit)
-        .style('opacity', 0)
-        .remove();
+    mainArea.exit().transition().duration(durationForExit)
+        .style('opacity', 0);
 };
-c3_chart_internal_fn.redrawArea = function (drawArea, withTransition) {
+c3_chart_internal_fn.redrawArea = function (drawArea, withTransition, transition) {
     return [
-        (withTransition ? this.mainArea.transition(Math.random().toString()) : this.mainArea)
+        (withTransition ? this.mainArea.transition(transition) : this.mainArea)
             .attr("d", drawArea)
             .style("fill", this.color)
             .style("opacity", this.orgAreaOpacity)
     ];
 };
 c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) {
-    var $$ = this, config = $$.config, area = $$.d3.svg.area(),
+    var $$ = this, config = $$.config, area = $$.d3.area(),
         getPoints = $$.generateGetAreaPoints(areaIndices, isSub),
         yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale,
         xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); },
@@ -264,7 +262,7 @@ c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) {
             x0 = 0, y0 = 0, path;
         if ($$.isAreaType(d)) {
             if ($$.isStepType(d)) { values = $$.convertValuesToStep(values); }
-            path = area.interpolate($$.getInterpolate(d))(values);
+            path = area.curve($$.getInterpolate(d))(values);
         } else {
             if (values[0]) {
                 x0 = $$.x(values[0].x);
@@ -304,27 +302,31 @@ c3_chart_internal_fn.generateGetAreaPoints = function (areaIndices, isSub) { //
 };
 
 
-c3_chart_internal_fn.updateCircle = function () {
+c3_chart_internal_fn.updateCircle = function (cx, cy) {
     var $$ = this;
-    $$.mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
+    var mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
         .data($$.lineOrScatterData.bind($$));
-    $$.mainCircle.enter().append("circle")
+    var mainCircleEnter = mainCircle.enter().append("circle")
         .attr("class", $$.classCircle.bind($$))
+        .attr("cx", cx)
+        .attr("cy", cy)
         .attr("r", $$.pointR.bind($$))
         .style("fill", $$.color);
-    $$.mainCircle
+    $$.mainCircle = mainCircleEnter.merge(mainCircle)
         .style("opacity", $$.initialOpacityForCircle.bind($$));
-    $$.mainCircle.exit().remove();
+    mainCircle.exit()
+        .style("opacity", 0);
 };
-c3_chart_internal_fn.redrawCircle = function (cx, cy, withTransition) {
-    var selectedCircles = this.main.selectAll('.' + CLASS.selectedCircle);
+c3_chart_internal_fn.redrawCircle = function (cx, cy, withTransition, transition) {
+    var $$ = this,
+        selectedCircles = $$.main.selectAll('.' + CLASS.selectedCircle);
     return [
-        (withTransition ? this.mainCircle.transition(Math.random().toString()) : this.mainCircle)
-            .style('opacity', this.opacityForCircle.bind(this))
-            .style("fill", this.color)
+        (withTransition ? $$.mainCircle.transition(transition) : $$.mainCircle)
+            .style('opacity', this.opacityForCircle.bind($$))
+            .style("fill", $$.color)
             .attr("cx", cx)
             .attr("cy", cy),
-        (withTransition ? selectedCircles.transition(Math.random().toString()) : selectedCircles)
+        (withTransition ? selectedCircles.transition(transition) : selectedCircles)
             .attr("cx", cx)
             .attr("cy", cy)
     ];
diff --git a/src/size.js b/src/size.js
index d99f53f..2a91b26 100644
--- a/src/size.js
+++ b/src/size.js
@@ -114,6 +114,3 @@ c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
     return h + ($$.axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0);
 };
 
-c3_chart_internal_fn.getEventRectWidth = function () {
-    return Math.max(0, this.xAxis.tickInterval());
-};
diff --git a/src/subchart.js b/src/subchart.js
index a4dacf7..0b724b4 100644
--- a/src/subchart.js
+++ b/src/subchart.js
@@ -2,22 +2,69 @@ import CLASS from './class';
 import { c3_chart_internal_fn } from './core';
 import { isFunction } from './util';
 
-c3_chart_internal_fn.initBrush = function () {
+c3_chart_internal_fn.initBrush = function (scale) {
     var $$ = this, d3 = $$.d3;
-    $$.brush = d3.svg.brush().on("brush", function () { $$.redrawForBrush(); });
-    $$.brush.update = function () {
-        if ($$.context) { $$.context.select('.' + CLASS.brush).call(this); }
+    // TODO: dynamically change brushY/brushX according to axis_rotated.
+    $$.brush = ($$.config.axis_rotated ? d3.brushY() : d3.brushX()).on("brush", function () {
+        var event = d3.event.sourceEvent;
+        if (event && event.type === "zoom") { return; }
+        $$.redrawForBrush();
+    }).on("end", function () {
+        var event = d3.event.sourceEvent;
+        if (event && event.type === "zoom") { return; }
+        if ($$.brush.empty() && event && event.type !== 'end') { $$.brush.clear(); }
+    });
+    $$.brush.updateExtent = function () {
+        var range = this.scale.range(), extent;
+        if ($$.config.axis_rotated) {
+            extent = [[0, range[0]], [$$.width2, range[1]]];
+        }
+        else {
+            extent = [[range[0], 0], [range[1], $$.height2]];
+        }
+        this.extent(extent);
         return this;
     };
-    $$.brush.scale = function (scale) {
-        return $$.config.axis_rotated ? this.y(scale) : this.x(scale);
+    $$.brush.updateScale = function (scale) {
+        this.scale = scale;
+        return this;
+    };
+    $$.brush.update = 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());
+    };
+    $$.brush.selectionAsValue = function (selectionAsValue, withTransition) {
+        var selection, brush;
+        if (selectionAsValue) {
+            if ($$.context) {
+                selection = [this.scale(selectionAsValue[0]), this.scale(selectionAsValue[1])];
+                brush = $$.context.select('.' + CLASS.brush);
+                if (withTransition) { brush = brush.transition(); }
+                $$.brush.move(brush, selection);
+            }
+            return [];
+        }
+        selection = $$.brush.selection() || [0,0];
+        return [this.scale.invert(selection[0]), this.scale.invert(selection[1])];
+    };
+    $$.brush.empty = function () {
+        var selection = $$.brush.selection();
+        return !selection || selection[0] === selection[1];
+    };
+    return $$.brush.updateScale(scale);
 };
 c3_chart_internal_fn.initSubchart = function () {
     var $$ = this, config = $$.config,
         context = $$.context = $$.svg.append("g").attr("transform", $$.getTranslate('context')),
         visibility = config.subchart_show ? 'visible' : 'hidden';
 
+    // set style
     context.style('visibility', visibility);
 
     // Define g for chart area
@@ -36,20 +83,24 @@ c3_chart_internal_fn.initSubchart = function () {
     // Add extent rect for Brush
     context.append("g")
         .attr("clip-path", $$.clipPath)
-        .attr("class", CLASS.brush)
-        .call($$.brush);
+        .attr("class", CLASS.brush);
 
     // ATTENTION: This must be called AFTER chart added
     // Add Axis
     $$.axes.subx = context.append("g")
         .attr("class", CLASS.axisX)
         .attr("transform", $$.getTranslate('subx'))
-        .attr("clip-path", config.axis_rotated ? "" : $$.clipPathForXAxis)
-        .style("visibility", config.subchart_axis_x_show ? visibility : 'hidden');
+        .attr("clip-path", config.axis_rotated ? "" : $$.clipPathForXAxis);
+};
+c3_chart_internal_fn.initSubchartBrush = function () {
+    var $$ = this;
+    // Add extent rect for Brush
+    $$.initBrush($$.subX).updateExtent();
+    $$.context.select('.' + CLASS.brush).call($$.brush);
 };
 c3_chart_internal_fn.updateTargetsForSubchart = function (targets) {
     var $$ = this, context = $$.context, config = $$.config,
-        contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate,
+        contextLineEnter, contextLine, contextBarEnter, contextBar,
         classChartBar = $$.classChartBar.bind($$),
         classBars = $$.classBars.bind($$),
         classChartLine = $$.classChartLine.bind($$),
@@ -58,22 +109,22 @@ c3_chart_internal_fn.updateTargetsForSubchart = function (targets) {
 
     if (config.subchart_show) {
         //-- Bar --//
-        contextBarUpdate = context.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar)
-            .data(targets)
-            .attr('class', classChartBar);
-        contextBarEnter = contextBarUpdate.enter().append('g')
-            .style('opacity', 0)
+        contextBar = context.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar)
+            .data(targets);
+        contextBarEnter = contextBar.enter().append('g')
+            .style('opacity', 0);
+        contextBarEnter.merge(contextBar)
             .attr('class', classChartBar);
         // Bars for each data
         contextBarEnter.append('g')
             .attr("class", classBars);
 
         //-- Line --//
-        contextLineUpdate = context.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
-            .data(targets)
-            .attr('class', classChartLine);
-        contextLineEnter = contextLineUpdate.enter().append('g')
-            .style('opacity', 0)
+        contextLine = context.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
+            .data(targets);
+        contextLineEnter = contextLine.enter().append('g')
+            .style('opacity', 0);
+        contextLineEnter.merge(contextLine)
             .attr('class', classChartLine);
         // Lines for each data
         contextLineEnter.append("g")
@@ -89,17 +140,17 @@ c3_chart_internal_fn.updateTargetsForSubchart = function (targets) {
 };
 c3_chart_internal_fn.updateBarForSubchart = function (durationForExit) {
     var $$ = this;
-    $$.contextBar = $$.context.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
+    var contextBar = $$.context.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
         .data($$.barData.bind($$));
-    $$.contextBar.enter().append('path')
+    var contextBarEnter = contextBar.enter().append('path')
         .attr("class", $$.classBar.bind($$))
         .style("stroke", 'none')
         .style("fill", $$.color);
-    $$.contextBar
-        .style("opacity", $$.initialOpacity.bind($$));
-    $$.contextBar.exit().transition().duration(durationForExit)
+    contextBar.exit().transition().duration(durationForExit)
         .style('opacity', 0)
         .remove();
+    $$.contextBar = contextBarEnter.merge(contextBar)
+        .style("opacity", $$.initialOpacity.bind($$));
 };
 c3_chart_internal_fn.redrawBarForSubchart = function (drawBarOnSub, withTransition, duration) {
     (withTransition ? this.contextBar.transition(Math.random().toString()).duration(duration) : this.contextBar)
@@ -108,16 +159,16 @@ c3_chart_internal_fn.redrawBarForSubchart = function (drawBarOnSub, withTransiti
 };
 c3_chart_internal_fn.updateLineForSubchart = function (durationForExit) {
     var $$ = this;
-    $$.contextLine = $$.context.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
+    var contextLine = $$.context.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
         .data($$.lineData.bind($$));
-    $$.contextLine.enter().append('path')
+    var contextLineEnter = contextLine.enter().append('path')
         .attr('class', $$.classLine.bind($$))
         .style('stroke', $$.color);
-    $$.contextLine
-        .style("opacity", $$.initialOpacity.bind($$));
-    $$.contextLine.exit().transition().duration(durationForExit)
+    contextLine.exit().transition().duration(durationForExit)
         .style('opacity', 0)
         .remove();
+    $$.contextLine = contextLineEnter.merge(contextLine)
+        .style("opacity", $$.initialOpacity.bind($$));
 };
 c3_chart_internal_fn.redrawLineForSubchart = function (drawLineOnSub, withTransition, duration) {
     (withTransition ? this.contextLine.transition(Math.random().toString()).duration(duration) : this.contextLine)
@@ -126,17 +177,17 @@ c3_chart_internal_fn.redrawLineForSubchart = function (drawLineOnSub, withTransi
 };
 c3_chart_internal_fn.updateAreaForSubchart = function (durationForExit) {
     var $$ = this, d3 = $$.d3;
-    $$.contextArea = $$.context.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
+    var contextArea = $$.context.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
         .data($$.lineData.bind($$));
-    $$.contextArea.enter().append('path')
+    var contextAreaEnter = contextArea.enter().append('path')
         .attr("class", $$.classArea.bind($$))
         .style("fill", $$.color)
         .style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; });
-    $$.contextArea
-        .style("opacity", 0);
-    $$.contextArea.exit().transition().duration(durationForExit)
+    contextArea.exit().transition().duration(durationForExit)
         .style('opacity', 0)
         .remove();
+    $$.contextArea = contextAreaEnter.merge(contextArea)
+        .style("opacity", 0);
 };
 c3_chart_internal_fn.redrawAreaForSubchart = function (drawAreaOnSub, withTransition, duration) {
     (withTransition ? this.contextArea.transition(Math.random().toString()).duration(duration) : this.contextArea)
@@ -154,14 +205,13 @@ c3_chart_internal_fn.redrawSubchart = function (withSubchart, transitions, durat
     if (config.subchart_show) {
         // reflect main chart to extent on subchart if zoomed
         if (d3.event && d3.event.type === 'zoom') {
-            $$.brush.extent($$.x.orgDomain()).update();
+            $$.brush.selectionAsValue($$.x.orgDomain());
         }
         // update subchart elements if needed
         if (withSubchart) {
-
             // extent rect
             if (!$$.brush.empty()) {
-                $$.brush.extent($$.x.orgDomain()).update();
+                $$.brush.selectionAsValue($$.x.orgDomain());
             }
             // setup drawer - MEMO: this must be called after axis updated
             drawAreaOnSub = $$.generateDrawArea(areaIndices, true);
@@ -179,14 +229,20 @@ 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,
         withSubchart: false,
         withUpdateXDomain: true,
+        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) {
@@ -200,11 +256,11 @@ c3_chart_internal_fn.transformContext = function (withTransition, transitions) {
     $$.context.attr("transform", $$.getTranslate('context'));
     subXAxis.attr("transform", $$.getTranslate('subx'));
 };
-c3_chart_internal_fn.getDefaultExtent = function () {
+c3_chart_internal_fn.getDefaultSelection = function () {
     var $$ = this, config = $$.config,
-        extent = isFunction(config.axis_x_extent) ? config.axis_x_extent($$.getXDomain($$.data.targets)) : config.axis_x_extent;
+        selection = isFunction(config.axis_x_selection) ? config.axis_x_selection($$.getXDomain($$.data.targets)) : config.axis_x_selection;
     if ($$.isTimeSeries()) {
-        extent = [$$.parseDate(extent[0]), $$.parseDate(extent[1])];
+        selection = [$$.parseDate(selection[0]), $$.parseDate(selection[1])];
     }
-    return extent;
+    return selection;
 };
diff --git a/src/text.js b/src/text.js
index 25f55fa..38f0d74 100644
--- a/src/text.js
+++ b/src/text.js
@@ -8,42 +8,45 @@ c3_chart_internal_fn.initText = function () {
     $$.mainText = $$.d3.selectAll([]);
 };
 c3_chart_internal_fn.updateTargetsForText = function (targets) {
-    var $$ = this, mainTextUpdate, mainTextEnter,
+    var $$ = this,
         classChartText = $$.classChartText.bind($$),
         classTexts = $$.classTexts.bind($$),
         classFocus = $$.classFocus.bind($$);
-    mainTextUpdate = $$.main.select('.' + CLASS.chartTexts).selectAll('.' + CLASS.chartText)
-        .data(targets)
-        .attr('class', function (d) { return classChartText(d) + classFocus(d); });
-    mainTextEnter = mainTextUpdate.enter().append('g')
+    var mainText = $$.main.select('.' + CLASS.chartTexts).selectAll('.' + CLASS.chartText)
+        .data(targets);
+    var mainTextEnter = mainText.enter().append('g')
         .attr('class', classChartText)
         .style('opacity', 0)
         .style("pointer-events", "none");
     mainTextEnter.append('g')
         .attr('class', classTexts);
+    mainTextEnter.merge(mainText)
+        .attr('class', function (d) { return classChartText(d) + classFocus(d); });
 };
-c3_chart_internal_fn.updateText = function (durationForExit) {
+c3_chart_internal_fn.updateText = function (xForText, yForText, durationForExit) {
     var $$ = this, config = $$.config,
         barOrLineData = $$.barOrLineData.bind($$),
         classText = $$.classText.bind($$);
-    $$.mainText = $$.main.selectAll('.' + CLASS.texts).selectAll('.' + CLASS.text)
+    var mainText = $$.main.selectAll('.' + CLASS.texts).selectAll('.' + CLASS.text)
         .data(barOrLineData);
-    $$.mainText.enter().append('text')
+    var mainTextEnter = mainText.enter().append('text')
         .attr("class", classText)
         .attr('text-anchor', function (d) { return config.axis_rotated ? (d.value < 0 ? 'end' : 'start') : 'middle'; })
         .style("stroke", 'none')
+        .attr('x', xForText)
+        .attr('y', yForText)
         .style("fill", function (d) { return $$.color(d); })
         .style("fill-opacity", 0);
-    $$.mainText
+    $$.mainText = mainTextEnter.merge(mainText)
         .text(function (d, i, j) { return $$.dataLabelFormat(d.id)(d.value, d.id, i, j); });
-    $$.mainText.exit()
+    mainText.exit()
         .transition().duration(durationForExit)
         .style('fill-opacity', 0)
         .remove();
 };
-c3_chart_internal_fn.redrawText = function (xForText, yForText, forFlow, withTransition) {
+c3_chart_internal_fn.redrawText = function (xForText, yForText, forFlow, withTransition, transition) {
     return [
-        (withTransition ? this.mainText.transition() : this.mainText)
+        (withTransition ? this.mainText.transition(transition) : this.mainText)
             .attr('x', xForText)
             .attr('y', yForText)
             .style("fill", this.color)
diff --git a/src/type.js b/src/type.js
index 620f7ef..72a4b6e 100644
--- a/src/type.js
+++ b/src/type.js
@@ -92,6 +92,3 @@ c3_chart_internal_fn.lineOrScatterData = function (d) {
 c3_chart_internal_fn.barOrLineData = function (d) {
     return this.isBarType(d) || this.isLineType(d) ? d.values : [];
 };
-c3_chart_internal_fn.isInterpolationType = function (type) {
-    return ['linear', 'linear-closed', 'basis', 'basis-open', 'basis-closed', 'bundle', 'cardinal', 'cardinal-open', 'cardinal-closed', 'monotone'].indexOf(type) >= 0;
-};
diff --git a/src/zoom.js b/src/zoom.js
index fea6bda..446347c 100644
--- a/src/zoom.js
+++ b/src/zoom.js
@@ -1,54 +1,59 @@
-import CLASS from './class';
 import { c3_chart_internal_fn } from './core';
-import { diffDomain } from './util';
 
 c3_chart_internal_fn.initZoom = function () {
     var $$ = this, d3 = $$.d3, config = $$.config, startEvent;
 
-    $$.zoom = d3.behavior.zoom()
-        .on("zoomstart", function () {
-            startEvent = d3.event.sourceEvent;
-            $$.zoom.altDomain = d3.event.sourceEvent.altKey ? $$.x.orgDomain() : null;
-            config.zoom_onzoomstart.call($$.api, d3.event.sourceEvent);
+    $$.zoom = d3.zoom()
+        .on("start", function () {
+            var e = d3.event.sourceEvent;
+            if (e && e.type === "brush") { return; }
+            startEvent = e;
+            config.zoom_onzoomstart.call($$.api, e);
         })
         .on("zoom", function () {
+            var e = d3.event.sourceEvent;
+            if (e && e.type === "brush") { return; }
             $$.redrawForZoom.call($$);
         })
-        .on('zoomend', function () {
-            var event = d3.event.sourceEvent;
+        .on('end', function () {
+            var e = d3.event.sourceEvent;
+            if (e && e.type === "brush") { return; }
             // if click, do nothing. otherwise, click interaction will be canceled.
-            if (event && startEvent.clientX === event.clientX && startEvent.clientY === event.clientY) {
+            if (e && startEvent.clientX === e.clientX && startEvent.clientY === e.clientY) {
                 return;
             }
-            $$.redrawEventRect();
-            $$.updateZoom();
             config.zoom_onzoomend.call($$.api, $$.x.orgDomain());
         });
-    $$.zoom.scale = function (scale) {
-        return config.axis_rotated ? this.y(scale) : this.x(scale);
-    };
-    $$.zoom.orgScaleExtent = function () {
-        var extent = config.zoom_extent ? config.zoom_extent : [1, 10];
-        return [extent[0], Math.max($$.getMaxDataCount() / extent[1], extent[1])];
+
+    $$.zoom.updateDomain = function () {
+        if (d3.event && d3.event.transform) {
+            $$.x.domain(d3.event.transform.rescaleX($$.subX).domain());
+        }
+        return this;
     };
-    $$.zoom.updateScaleExtent = function () {
-        var ratio = diffDomain($$.x.orgDomain()) / diffDomain($$.getZoomDomain()),
-            extent = this.orgScaleExtent();
-        this.scaleExtent([extent[0] * ratio, extent[1] * ratio]);
+    $$.zoom.updateExtent = function () {
+        this.scaleExtent([1, Infinity])
+            .translateExtent([[0, 0], [$$.width, $$.height]])
+            .extent([[0, 0], [$$.width, $$.height]]);
         return this;
     };
+    $$.zoom.update = function () {
+        return this.updateExtent().updateDomain();
+    };
+
+    return $$.zoom.updateExtent();
+};
+c3_chart_internal_fn.zoomTransform = function (range) {
+    var $$ = this, s = [$$.x(range[0]), $$.x(range[1])];
+    return $$.d3.zoomIdentity.scale($$.width / (s[1] - s[0])).translate(-s[0], 0);
 };
+
 c3_chart_internal_fn.getZoomDomain = function () {
     var $$ = this, config = $$.config, d3 = $$.d3,
         min = d3.min([$$.orgXDomain[0], config.zoom_x_min]),
         max = d3.max([$$.orgXDomain[1], config.zoom_x_max]);
     return [min, max];
 };
-c3_chart_internal_fn.updateZoom = function () {
-    var $$ = this, z = $$.config.zoom_enabled ? $$.zoom : function () {};
-    $$.main.select('.' + CLASS.zoomRect).call(z).on("dblclick.zoom", null);
-    $$.main.selectAll('.' + CLASS.eventRect).call(z).on("dblclick.zoom", null);
-};
 c3_chart_internal_fn.redrawForZoom = function () {
     var $$ = this, d3 = $$.d3, config = $$.config, zoom = $$.zoom, x = $$.x;
     if (!config.zoom_enabled) {
@@ -57,11 +62,9 @@ c3_chart_internal_fn.redrawForZoom = function () {
     if ($$.filterTargetsToShow($$.data.targets).length === 0) {
         return;
     }
-    if (d3.event.sourceEvent.type === 'mousemove' && zoom.altDomain) {
-        x.domain(zoom.altDomain);
-        zoom.scale(x).updateScaleExtent();
-        return;
-    }
+
+    zoom.update();
+
     if ($$.isCategorized() && x.orgDomain()[0] === $$.orgXDomain[0]) {
         x.domain([$$.orgXDomain[0] - 1e-10, x.orgDomain()[1]]);
     }
@@ -72,7 +75,7 @@ c3_chart_internal_fn.redrawForZoom = function () {
         withEventRect: false,
         withDimension: false
     });
-    if (d3.event.sourceEvent.type === 'mousemove') {
+    if (d3.event.sourceEvent && d3.event.sourceEvent.type === 'mousemove') {
         $$.cancelClick = true;
     }
     config.zoom_onzoom.call($$.api, x.orgDomain());
