Merge pull request #2246 from c3js/feature/d3_v4

Update for D3 v4
7 years ago · ccff119809
124 changed files with 1223 additions and 974 deletions
--- 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>
--- 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({
--- 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({
--- 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>

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

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

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

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

--- 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'}]
          }
        }
      });
--- a/htdocs/samples/api_zoom.html
+++ 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>
--- 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_selection.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: {
--- 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/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]
          ]
        },
--- 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>

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

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

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

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

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

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

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

--- 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.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() {
--- 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/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>

--- 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",
--- 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",
--- 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)),
--- 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() {
--- 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 () {
--- 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); }
 };

--- 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] + ')');
                });
            });
        });
--- 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 () {
--- 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();
            });

        });
--- 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);
            });
        });
    });
--- 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 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 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').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;
            });

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

        });
--- a/Show More
+++ b/Show More