From 8b9318f7a7ae0d92b06779f62077079a02ea2c5e Mon Sep 17 00:00:00 2001
From: Masayuki Tanaka <masayuki0812@mac.com>
Date: Fri, 5 Jan 2018 23:18:32 +0900
Subject: [PATCH] Fix bugs and update samples to use d3.v4

---
 htdocs/index.html                             |  2 +-
 htdocs/samples/area_zerobased.html            |  2 +-
 htdocs/samples/axes_padding.html              |  2 +-
 htdocs/samples/axes_range.html                |  2 +-
 htdocs/samples/axes_x_range_timeseries.html   |  2 +-
 htdocs/samples/axes_x_tick_culling.html       |  2 +-
 htdocs/samples/axes_x_tick_fit.html           |  2 +-
 htdocs/samples/axes_x_tick_rotate.html        |  2 +-
 htdocs/samples/axes_x_tick_values.html        |  2 +-
 htdocs/samples/axes_y2.html                   |  2 +-
 htdocs/samples/axes_y_default.html            |  2 +-
 htdocs/samples/bar_zerobased.html             |  2 +-
 htdocs/samples/bindto.html                    |  2 +-
 htdocs/samples/chart_area_spline.html         |  2 +-
 htdocs/samples/chart_area_spline_stacked.html |  2 +-
 htdocs/samples/chart_area_stacked.html        |  2 +-
 htdocs/samples/chart_area_step.html           |  2 +-
 htdocs/samples/chart_area_step_stacked.html   |  2 +-
 htdocs/samples/chart_bar_space.html           |  2 +-
 htdocs/samples/chart_combination.html         |  4 +-
 htdocs/samples/chart_donut.html               |  2 +-
 htdocs/samples/chart_gauge.html               |  2 +-
 htdocs/samples/chart_pie_sort.html            |  2 +-
 htdocs/samples/chart_scatter.html             |  2 +-
 htdocs/samples/chart_spline.html              |  4 +-
 htdocs/samples/chart_step.html                |  2 +-
 htdocs/samples/custom_x_categorized.html      |  2 +-
 htdocs/samples/custom_x_scale.html            |  2 +-
 htdocs/samples/custom_xs_scale.html           |  2 +-
 htdocs/samples/data_columned.html             |  4 +-
 htdocs/samples/data_hide.html                 |  4 +-
 htdocs/samples/data_json.html                 |  2 +-
 htdocs/samples/data_label_format.html         |  2 +-
 htdocs/samples/data_load.html                 |  2 +-
 htdocs/samples/data_load_timeseries.html      |  2 +-
 htdocs/samples/data_region.html               |  2 +-
 htdocs/samples/data_region_timeseries.html    |  2 +-
 htdocs/samples/data_rowed.html                |  4 +-
 htdocs/samples/data_url.html                  |  2 +-
 .../samples/different_category_datasets.html  |  4 +-
 htdocs/samples/domain_y.html                  |  2 +-
 htdocs/samples/emptydata.html                 |  2 +-
 htdocs/samples/grid_focus.html                |  2 +-
 htdocs/samples/grid_x_lines.html              |  2 +-
 htdocs/samples/grid_x_lines_timeseries.html   |  2 +-
 htdocs/samples/grids.html                     |  2 +-
 htdocs/samples/grids_timeseries.html          |  2 +-
 htdocs/samples/legend.html                    |  2 +-
 htdocs/samples/padding.html                   |  2 +-
 htdocs/samples/padding_update.html            |  2 +-
 htdocs/samples/point_r.html                   |  4 +-
 htdocs/samples/point_show.html                |  4 +-
 htdocs/samples/regions.html                   |  2 +-
 htdocs/samples/regions_timeseries.html        |  2 +-
 htdocs/samples/tooltip_grouped.html           |  2 +-
 htdocs/samples/tooltip_show.html              |  4 +-
 htdocs/samples/zoom_category.html             |  2 +-
 src/api.flow.js                               |  5 ++-
 src/core.js                                   |  6 ++-
 src/data.convert.js                           | 10 ++---
 src/grid.js                                   | 27 ++++++++-----
 src/region.js                                 | 36 +++++++-----------
 src/shape.bar.js                              | 13 +++----
 src/shape.line.js                             | 38 +++++++++----------
 64 files changed, 134 insertions(+), 133 deletions(-)

diff --git a/htdocs/index.html b/htdocs/index.html
index 6f12df0..2d79519 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -365,7 +365,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">
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_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/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_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_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_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_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/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/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/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_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/src/api.flow.js b/src/api.flow.js
index a9431aa..6e290dc 100644
--- a/src/api.flow.js
+++ b/src/api.flow.js
@@ -250,7 +250,10 @@ c3_chart_internal_fn.generateFlow = function (args) {
             // 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);
             xgridLines
                 .attr('transform', null);
             xgridLines.select('line')
diff --git a/src/core.js b/src/core.js
index 078e4eb..891a00a 100644
--- a/src/core.js
+++ b/src/core.js
@@ -279,8 +279,10 @@ c3_chart_internal_fn.initWithData = function (data) {
 
     // Cover whole with rects for events
     $$.initEventRect();
-    // TODO: fix
-    $$.main.select('.' + CLASS.eventRect).call($$.zoom).on("dblclick.zoom", null);
+    // event rect handle zoom event as well
+    if (config.zoom_enabled) {
+        $$.main.select('.' + CLASS.eventRect).call($$.zoom).on("dblclick.zoom", null);
+    }
 
     // Define g for chart
     $$.initChartElements();
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/grid.js b/src/grid.js
index 2a6577a..b9acc3a 100644
--- a/src/grid.js
+++ b/src/grid.js
@@ -48,29 +48,36 @@ c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
         'y2': $$.height
     };
 
-    var xgrids = $$.main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid)
+    var xgrid = $$.main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid)
         .data(xgridData);
-    $$.xgrid = xgrids.enter().append('line').attr("class", CLASS.xgrid).merge(xgrids);
+    var xgridEnter = xgrid.enter().append('line')
+        .attr("class", CLASS.xgrid);
+    $$.xgrid = xgridEnter.merge(xgrid);
     if (!withoutUpdate) {
-        $$.xgrid.attr($$.xgridAttr)
+        $$.xgrid
+            .attr('x1', $$.xgridAttr.x1)
+            .attr('x2', $$.xgridAttr.x2)
+            .attr('y1', $$.xgridAttr.y1)
+            .attr('y2', $$.xgridAttr.y2)
             .style("opacity", function () { return +d3.select(this).attr(config.axis_rotated ? 'y1' : 'x1') === (config.axis_rotated ? $$.height : 0) ? 0 : 1; });
     }
-    xgrids.exit().remove();
+    xgrid.exit().remove();
 };
 
 c3_chart_internal_fn.updateYGrid = function () {
     var $$ = this, config = $$.config,
         gridValues = $$.yAxis.tickValues() || $$.y.ticks(config.grid_y_ticks);
-    var ygrids = $$.main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid)
+    var ygrid = $$.main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid)
         .data(gridValues);
-    $$.ygrid = ygrids.enter().append('line')
-        .attr('class', CLASS.ygrid)
-        .merge(ygrids);
-    $$.ygrid.attr("x1", config.axis_rotated ? $$.y : 0)
+    var ygridEnter = ygrid.enter().append('line')
+        .attr('class', CLASS.ygrid);
+    $$.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);
-    ygrids.exit().remove();
+    ygrid.exit().remove();
     $$.smoothLines($$.ygrid, 'grid');
 };
 
diff --git a/src/region.js b/src/region.js
index 83ca16e..e419366 100644
--- a/src/region.js
+++ b/src/region.js
@@ -14,36 +14,28 @@ 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')
+    var mainRegionEnter = mainRegion.enter().append('g')
       .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)
+    var $$ = this, regions = $$.mainRegion;
+    return [(withTransition ? regions.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/shape.bar.js b/src/shape.bar.js
index 208161b..07dd6f0 100644
--- a/src/shape.bar.js
+++ b/src/shape.bar.js
@@ -31,17 +31,16 @@ c3_chart_internal_fn.updateBar = function (durationForExit) {
         classBar = $$.classBar.bind($$),
         initialOpacity = $$.initialOpacity.bind($$),
         color = function (d) { return $$.color(d.id); };
-    var bars = $$.main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
+    var mainBar = $$.main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
         .data(barData);
-    $$.mainBar = bars.enter().append('path')
+    var mainBarEnter = mainBar.enter().append('path')
         .attr("class", classBar)
         .style("stroke", color)
-        .style("fill", color)
-        .merge(bars);
-    $$.mainBar
+        .style("fill", color);
+    $$.mainBar = mainBarEnter.merge(mainBar)
         .style("opacity", initialOpacity);
-    bars.exit().transition().duration(durationForExit)
-        .remove();
+    mainBar.exit().transition().duration(durationForExit)
+        .style("opacity", 0);
 };
 c3_chart_internal_fn.redrawBar = function (drawBar, withTransition) {
     return [
diff --git a/src/shape.line.js b/src/shape.line.js
index 2b4a6e3..ffce60f 100644
--- a/src/shape.line.js
+++ b/src/shape.line.js
@@ -45,19 +45,17 @@ c3_chart_internal_fn.updateTargetsForLine = function (targets) {
 };
 c3_chart_internal_fn.updateLine = function (durationForExit) {
     var $$ = this;
-    var lines = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
+    var mainLine = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
         .data($$.lineData.bind($$));
-    $$.mainLine = lines.enter().append('path')
+    var mainLineEnter = mainLine.enter().append('path')
         .attr('class', $$.classLine.bind($$))
-        .style("stroke", $$.color)
-        .merge(lines);
-    $$.mainLine
+        .style("stroke", $$.color);
+    $$.mainLine = mainLineEnter.merge(mainLine)
         .style("opacity", $$.initialOpacity.bind($$))
         .style('shape-rendering', function (d) { return $$.isStepType(d) ? 'crispEdges' : ''; })
         .attr('transform', null);
-    lines.exit().transition().duration(durationForExit)
-        .style('opacity', 0)
-        .remove();
+    mainLine.exit().transition().duration(durationForExit)
+        .style('opacity', 0);
 };
 c3_chart_internal_fn.redrawLine = function (drawLine, withTransition) {
     return [
@@ -223,17 +221,16 @@ c3_chart_internal_fn.lineWithRegions = function (d, x, y, _regions) {
 
 c3_chart_internal_fn.updateArea = function (durationForExit) {
     var $$ = this, d3 = $$.d3;
-    var areas = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
+    var mainArea = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
         .data($$.lineData.bind($$));
-    $$.mainArea = areas.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; }).merge(areas);
-    $$.mainArea
+        .style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; });
+    $$.mainArea = mainAreaEnter.merge(mainArea)
         .style("opacity", $$.orgAreaOpacity);
-    areas.exit().transition().duration(durationForExit)
-        .style('opacity', 0)
-        .remove();
+    mainArea.exit().transition().duration(durationForExit)
+        .style('opacity', 0);
 };
 c3_chart_internal_fn.redrawArea = function (drawArea, withTransition) {
     return [
@@ -307,15 +304,16 @@ c3_chart_internal_fn.generateGetAreaPoints = function (areaIndices, isSub) { //
 
 c3_chart_internal_fn.updateCircle = function () {
     var $$ = this;
-    $$.mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
+    var mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
         .data($$.lineOrScatterData.bind($$));
-    $$.mainCircle = $$.mainCircle.enter().append("circle")
+    var mainCircleEnter = mainCircle.enter().append("circle")
         .attr("class", $$.classCircle.bind($$))
         .attr("r", $$.pointR.bind($$))
-        .style("fill", $$.color).merge($$.mainCircle);
-    $$.mainCircle
+        .style("fill", $$.color);
+    $$.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);