Fix for d3.v5 (#2335)

bower.json

@@ -26,6 +26,6 @@
     "Gruntfile.*"
   ],
   "dependencies": {
-    "d3": "^4.12.0"
+    "d3": "^5.0.0"
   }
 }

c3.js

@@ -135,10 +135,6 @@
       return call && (typeof call === "object" || typeof call === "function") ? call : self;
     };
 
-    var toArray = function (arr) {
-      return Array.isArray(arr) ? arr : Array.from(arr);
-    };
-
     var isValue = function isValue(v) {
         return v || v === 0;
     };
@@ -5384,35 +5380,30 @@
 
     c3_chart_internal_fn.convertUrlToData = function (url, mimeType, headers, keys, done) {
         var $$ = this,
-            type = mimeType ? mimeType : 'csv';
-        var req = $$.d3.request(url);
-        if (headers) {
-            Object.keys(headers).forEach(function (header) {
-                req.header(header, headers[header]);
-            });
+            type = mimeType ? mimeType : 'csv',
+            f,
+            converter;
+
+        if (type === 'json') {
+            f = $$.d3.json;
+            converter = $$.convertJsonToData;
+        } else if (type === 'tsv') {
+            f = $$.d3.tsv;
+            converter = $$.convertXsvToData;
+        } else {
+            f = $$.d3.csv;
+            converter = $$.convertXsvToData;
         }
-        req.get(function (error, data) {
-            var d;
-            var dataResponse = data.response || data.responseText; // Fixes IE9 XHR issue; see #1345
-            if (!data) {
-                throw new Error(error.responseURL + ' ' + error.status + ' (' + error.statusText + ')');
-            }
-            if (type === 'json') {
-                d = $$.convertJsonToData(JSON.parse(dataResponse), keys);
-            } else if (type === 'tsv') {
-                d = $$.convertTsvToData(dataResponse);
-            } else {
-                d = $$.convertCsvToData(dataResponse);
-            }
-            done.call($$, d);
+
+        f(url, headers).then(function (data) {
+            done.call($$, converter.call($$, data, keys));
+        }).catch(function (error) {
+            throw error;
         });
     };
-    c3_chart_internal_fn.convertXsvToData = function (xsv, parser) {
-        var _parser$parseRows = parser.parseRows(xsv),
-            _parser$parseRows2 = toArray(_parser$parseRows),
-            keys = _parser$parseRows2[0],
-            rows = _parser$parseRows2.slice(1);
-
+    c3_chart_internal_fn.convertXsvToData = function (xsv) {
+        var keys = xsv.columns,
+            rows = xsv;
         if (rows.length === 0) {
             return { keys: keys, rows: [keys.reduce(function (row, key) {
                     return Object.assign(row, defineProperty({}, key, null));
@@ -5420,15 +5411,9 @@
         } else {
             // [].concat() is to convert result into a plain array otherwise
             // test is not happy because rows have properties.
-            return { keys: keys, rows: [].concat(parser.parse(xsv)) };
+            return { keys: keys, rows: [].concat(xsv) };
         }
     };
-    c3_chart_internal_fn.convertCsvToData = function (csv) {
-        return this.convertXsvToData(csv, { parse: this.d3.csvParse, parseRows: this.d3.csvParseRows });
-    };
-    c3_chart_internal_fn.convertTsvToData = function (tsv) {
-        return this.convertXsvToData(tsv, { parse: this.d3.tsvParse, parseRows: this.d3.tsvParseRows });
-    };
     c3_chart_internal_fn.convertJsonToData = function (json, keys) {
         var $$ = this,
             new_rows = [],

component.json

@@ -5,7 +5,7 @@
   "version": "0.5.4",
   "keywords": [],
   "dependencies": {
-    "mbostock/d3": "v3.5.6"
+    "mbostock/d3": "v5.0.0"
   },
   "development": {},
   "license": "MIT",

extensions/js/c3ext.js

@@ -19,7 +19,7 @@ c3ext.generate = function (options) {
     var _zoom2_maxItems;
 
     if (_zoom2_maxItems == null) {
-        var el = d3.select(options.bindto)[0][0];
+        var el = d3.select(options.bindto).node();
         if (el != null) {
             var availWidth = el.clientWidth;
 
@@ -377,4 +377,4 @@ if (typeof(Array.prototype.splitIntoChunksOf)=="undefined") {
         }
         return list;
     }
-}
+}

htdocs/samples/api_axis_label.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/api_axis_range.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/api_category.html

@@ -6,7 +6,7 @@
     <div id="chart"></div>
     <div id="message"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/api_data_colors.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/api_flow.html

@@ -11,7 +11,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 
@@ -65,7 +65,7 @@
             ['data1', 'data2', 'data3'],
             [500, 100, 200],
             [200, null, null],
-            [100, 50, null] 
+            [100, 50, null]
           ],
           duration: 1500,
 

htdocs/samples/api_flow_timeseries.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/api_legend.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/api_tooltip_show.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/api_transform.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/api_xgrid_lines.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/api_ygrid_lines.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/api_zoom.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/area_zerobased.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/axes_padding.html

@@ -6,7 +6,7 @@
     <div id="chart1"></div>
     <div id="chart2"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/axes_range.html

@@ -6,7 +6,7 @@
     <div id="chart1"></div>
     <div id="chart2"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/axes_x_localtime.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 
@@ -40,7 +40,7 @@
 
       var data4 = {
           x : 'date',
-          x_format : '%Y%m%d',
+          xFormat : '%Y%m%d',
           columns: [
             ['date', '20130101', '20130102', '20130103', '20130104', '20130105'],
             ['sample', 1030, 1200, 1100, 1400, 1150],
@@ -50,7 +50,7 @@
 
       var data5 = {
           x : 'date',
-          x_format : '%Y%m%d %H:%M:%S',
+          xFormat : '%Y%m%d %H:%M:%S',
           columns: [
             ['date', '20130101 00:00:00', '20130102 00:00:00', '20130103 00:00:00', '20130104 00:00:00', '20130105 00:00:00'],
             ['sample', 30, 200, 100, 400, 150],

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.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/axes_x_selection.html

@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/axes_x_tick_culling.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/axes_x_tick_fit.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/axes_x_tick_rotate.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

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.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 
@@ -48,7 +48,7 @@
           }
         }
       });
-      
+
 
     </script>
   </body>

htdocs/samples/axes_y2.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/axes_y_default.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/bar_zerobased.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

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.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart1 = c3.generate({

htdocs/samples/categorized.html

@@ -6,7 +6,7 @@
     <div id="chart1"></div>
     <div id="chart2"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/chart_area.html

@@ -14,7 +14,7 @@
     <h3>+/- vaulues</h3>
     <div id="chart5"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/chart_area_spline.html

@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

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.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/chart_area_stacked.html

@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/chart_area_step.html

@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

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.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/chart_bar.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/chart_bar_max_width.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/chart_bar_space.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/chart_bar_stacked.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/chart_combination.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/chart_donut.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/chart_gauge.html

@@ -8,7 +8,7 @@
     <div id="chart2"></div>
     <div id="chart3"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/chart_multi_arc_gauge.html

@@ -4,7 +4,7 @@
   </head>
   <body>
     <div id="chart"></div>
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/chart_pie.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/chart_pie_sort.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/chart_scatter.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/chart_spline.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/chart_step.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/chart_step_category.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/custom_x_categorized.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/custom_x_scale.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/custom_xs_scale.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/data_columned.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/data_hide.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/data_json.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/data_label.html

@@ -15,7 +15,7 @@
     <div id="chart10"></div>
     <div id="chart11"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/data_label_format.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/data_load.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/data_load_timeseries.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/data_region.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/data_region_timeseries.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/data_rowed.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/data_url.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/different_category_datasets.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/domain_y.html

@@ -10,7 +10,7 @@
     <div id="chart2"></div>
     <div id="chart3"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

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.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/emptydata.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/grid_focus.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart1"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/grid_x_lines.html

@@ -6,7 +6,7 @@
     <div id="chart1"></div>
     <div id="chart2"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

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.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/grids.html

@@ -10,7 +10,7 @@
     <div id="chart5"></div>
     <div id="chart6"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/grids_timeseries.html

@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/interaction_enabled.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/legend.html

@@ -10,7 +10,7 @@
     <div id="chart5"></div>
     <div id="chart6"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/padding.html

@@ -21,7 +21,7 @@
     <div id="chart9"></div>
     <div id="chart10"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 
@@ -45,7 +45,7 @@
           rotated: true,
           y: {
             label: {
-              text: 'Y Label', 
+              text: 'Y Label',
               position: 'outer-center'
             }
           },

htdocs/samples/padding_update.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/plugin.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script src="/js/samples/plugin.js"></script>
     <script>

htdocs/samples/point_r.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/point_show.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/regions.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/regions_timeseries.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

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.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/simple.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/subchart.html

@@ -7,7 +7,7 @@
     <div id="chart2"></div>
     <div id="chart3"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/subchart_onbrush.html

@@ -6,7 +6,7 @@
     <div id="chart1"></div>
     <div id="chart2"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/timeseries.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/timeseries_date.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/timeseries_descendent.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/timeseries_raw.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/tooltip_grouped.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/tooltip_show.html

@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({

htdocs/samples/zoom.html

@@ -7,7 +7,7 @@
     <button onclick="load()">Load</button>
     <div id="chart2"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/zoom_category.html

@@ -6,7 +6,7 @@
     <div id="chart"></div>
     <button onclick="load()">Load</button>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/zoom_onzoom.html

@@ -6,7 +6,7 @@
     <div id="chart1"></div>
     <div id="chart2"></div>
 
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

htdocs/samples/zoom_reduction.html

@@ -7,7 +7,7 @@
     <link href="/css/c3.css" rel="stylesheet" />
     <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
     <script src="https://rawgithub.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>
-    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script src="/js/extensions/c3ext.js"></script>
     <script src="/js/samples/zoom_reduction.js"></script>

package.json

@@ -43,16 +43,16 @@
   "gitHead": "84e03109d9a590f9c8ef687c03d751f666080c6f",
   "readmeFilename": "README.md",
   "dependencies": {
-    "d3": "^4.12.0"
+    "d3": "^5.0.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
     "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-istanbul": "^4.1.4",
+    "babel-plugin-istanbul": "^4.1.6",
     "babel-preset-es2015": "^6.24.1",
     "babelify": "^8.0.0",
-    "browserify": "^16.0.0",
-    "clean-css-cli": "^4.1.3",
+    "browserify": "^16.1.1",
+    "clean-css-cli": "^4.1.11",
     "codecov": "^3.0.0",
     "gh-pages": "^1.1.0",
     "jasmine-core": "^2.3.4",
@@ -61,16 +61,16 @@
     "karma": "^2.0.0",
     "karma-browserify": "^5.1.1",
     "karma-chrome-launcher": "^2.1.1",
-    "karma-coverage-istanbul-reporter": "^1.3.0",
+    "karma-coverage-istanbul-reporter": "^1.4.2",
     "karma-jasmine": "^1.1.0",
     "karma-spec-reporter": "0.0.32",
-    "node-sass": "^4.5.3",
+    "node-sass": "^4.8.3",
     "node-static": "^0.7.9",
     "nodemon": "^1.11.0",
     "rollup": "^0.58.0",
     "rollup-plugin-babel": "^3.0.3",
-    "uglify-js": "^3.0.15",
-    "watchify": "^3.9.0"
+    "uglify-js": "^3.3.17",
+    "watchify": "^3.11.0"
   },
   "nyc": {
     "exclude": [

spec/data.convert.js

@@ -105,19 +105,9 @@ describe('data.convert', () => {
         });
     });
 
-    describe('$$.convertCsvToData', () => {
+    describe('$$.convertXsvToData', () => {
         it('converts the csv data to normalized data', () => {
-            const data = $$.convertCsvToData(`data1,data2,data3
-90,120,300
-40,160,240
-50,200,290
-120,160,230
-80,130,300
-90,220,320`);
-
-            expect(data).toEqual({
-                keys: ['data1', 'data2', 'data3'],
-                rows: [{
+            const data = [{
                     data1: '90',
                     data2: '120',
                     data3: '300'
@@ -141,35 +131,9 @@ describe('data.convert', () => {
                     data1: '90',
                     data2: '220',
                     data3: '320'
-                }]
-            });
-        });
-
-        it('converts one lined CSV data', () => {
-            const data = $$.convertCsvToData(`data1,data2,data3`);
-
-            expect(data).toEqual({
-                keys: ['data1', 'data2', 'data3'],
-                rows: [{
-                    data1: null,
-                    data2: null,
-                    data3: null
-                }]
-            });
-        });
-    });
-
-    describe('$$.convertTsvToData', () => {
-        it('converts the tsv data to normalized data', () => {
-            const data = $$.convertTsvToData(`data1\tdata2\tdata3
-90\t120\t300
-40\t160\t240
-50\t200\t290
-120\t160\t230
-80\t130\t300
-90\t220\t320`);
-
-            expect(data).toEqual({
+                }];
+            data.columns = ['data1', 'data2', 'data3'];
+            expect($$.convertXsvToData(data)).toEqual({
                 keys: ['data1', 'data2', 'data3'],
                 rows: [{
                     data1: '90',
@@ -199,10 +163,10 @@ describe('data.convert', () => {
             });
         });
 
-        it('converts one lined TSV data', () => {
-            const data = $$.convertTsvToData(`data1\tdata2\tdata3`);
-
-            expect(data).toEqual({
+        it('converts one lined CSV data', () => {
+            const data = [];
+            data.columns = ['data1', 'data2', 'data3'];
+            expect($$.convertXsvToData(data)).toEqual({
                 keys: ['data1', 'data2', 'data3'],
                 rows: [{
                     data1: null,