Fix bugs and update samples to use d3.v4

7 years ago · 8b9318f7a7
64 changed files with 134 additions and 133 deletions
--- 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">
--- 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({
--- 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>

--- 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>

--- 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>

--- 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({
--- 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({
--- 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({
--- 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>

--- 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({
--- 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({
--- 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({
--- 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({
--- 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>

--- 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>

--- 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>

--- 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>

--- 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>

--- 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>

--- 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: {
--- 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({
--- 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({
--- 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>

--- 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({
--- 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: {
--- 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({
--- 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({
--- 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({
--- 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({
--- 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: {
--- 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: {
--- 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>

--- 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({
--- 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>

--- 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({
--- 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({
--- 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({
--- 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: {
--- 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>

--- 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: {
--- 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>

--- 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>

--- 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>

--- 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>

--- 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>

--- 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>

--- 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>

--- 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>

--- 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>

--- 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>

--- 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',
--- 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',
--- 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({
--- 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>

--- 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>

--- 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',
--- 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>

--- 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')
--- 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
+    // 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();
--- 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,
--- 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');
 };

--- 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; })
    ];
 };
--- 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 [
--- 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);